@jalik/react-datetime-picker

Introduction

This lib allows you to add datetime inputs in your React applications with the following advantages.

Available in CJS and ESM
Multiple selection views (year, month, day, time, hour, minute, second)
Support for min and max datetime
Support for custom day renderer
Customizable datetime format
Customizable view (locale, week numbers, timezone...)
Works like a normal input (onChange/value)
Based on Intl API to support any language (English, French, Chinese...)
Based on luxon for date and time manipulation

NOTICE : The code has been tested with controlled components only.

Quickstart

The code below shows how to add a datetime input field with a default value and handling its changes.

import { DateTimeInput } from '@jalik/react-datetime-picker';
import React, {
  useCallback,
  useState
} from 'react';

// Don't forget to load default styles.
import '@jalik/react-datetime-picker/src/styles.css';

function App() {
  const [date, setDate] = useState(new Date().toISOString());

  const handleChange = useCallback((event) => {
    setDate(event.target.value);
  }, [])

  return (
    <div>
      <DateTimeInput
        format="D tt"
        locale="fr"
        name="date"
        onChange={handleChange}
        showCalendarIcon
        showCalendarOnFocus
        showTimeZone
        showWeekNumbers
        value={date}
      />
    </div>
  )
}

Props

`calendarIcon: string`

Allow to change the calendar icon in the input field.

`disabled: bool`

Set to true to avoid changes of the input value.

`format: string`

Allow to set a custom format for parsing/formatting the date in the input field.
Formatting is based on Luxon (https://moment.github.io/luxon/docs/manual/formatting.html#table-of-tokens).
The default value is D tt (localized date and time).

`locale: string`

Set the locale to use when displaying dates, month... (based on the Intl API).
The default value is navigator.language.

Example of different locales (fr-FR, ru, zh):

`max: string`

Pass an ISO date string that is the maximal valid datetime.

Example with 2021-06-10T23:59:59.000-10:00:

`min: string`

Pass an ISO date string that is the minimal valid datetime.

Example with 2021-06-10T00:00:00.000-10:00:

`renderDay: function`

Pass a function or functional component to customize days rendering.

`showCalendarIcon: bool`

Set to true to display the calendar icon in the input field.

`showCalendarOnFocus: bool`

Set to true to open the calendar when the input receives the focus (by click or keyboard).

`showTimeZone: bool`

Set to true to display the current timezone in the calendar.

`showWeekNumbers: bool`

Set to true to display week numbers in the calendar.

`value: string`

Used to pass the date in the format defined with format.

Customization

`renderDay: function`

The example below shows how to disable selection of week-end days.

import {
  CalendarDay,
  DateTimeInput
} from '@jalik/react-datetime-picker';
import React, {
  useCallback,
  useState
} from 'react';

// Don't forget to load default styles.
import '@jalik/react-datetime-picker/src/styles.css';

// Custom component that renders week-end days in red.
function CustomDayCell(props) {
  const { dateTime, currentMonth, selectedDateTime } = props;
  const isWeekEnd = dateTime.weekday > 5;
  const style = isWeekEnd ? { color: 'red' } : {};
  // We use the default component for rendering day, so we have less code to write.
  // But we could use another component with a complete different logic.
  return <CalendarDay {...props} style={style} />;
}

function App() {
  const [date, setDate] = useState(new Date().toISOString());

  const handleChange = useCallback((event) => {
    setDate(event.target.value);
  }, [])

  return (
    <div>
      <DateTimeInput
        name="date"
        onChange={handleChange}
        renderDay={CustomDayCell}
        value={date}
      />
    </div>
  )
}

Changelog

History of releases is in the changelog.

License

The code is released under the MIT License.