@jalik/react-datetime-picker
v1.0.3
Published
Date and time picker for React
Downloads
5
Maintainers
Readme
@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.