yardtp-datetimepicker is a blazingly unbenchmarked Datetime Picker component for React 16.8+ focusing on simplicity and accessiblity.
npm install --save yardtp-datetimepicker
import React from 'react';
import { DatePicker, useDatePickerState } from 'yardtp-datetimepicker/';
import format from 'date-fns/format';
// EXAMPLE 1: DatePicker basic usage
export default function Example1 (props) {
// useDatePickerState will default to today
const state = useDatePickerState();
// The output of useDatePickerState is an array with values and setFunctions for
// the currently selected day and the date for the calendar to display
const [selectedValue, setSelectedValue, calendarValue, setCalendarValue] = state;
return (
<>
{format(selectedValue, 'MMMM d, y')} - {format(calendarValue, 'MMMM d, y')}
<DatePicker state={state} />
</>
);
}
Name | Default | |
---|---|---|
state | This is an array containing: [selected datetime, set selected datetime function, calendar display datetime, set calendar display datetime function. ] You can create this via the helper function useDatePickerState, or by spreading two useState calls ([...useState(selectedDateTime), ....useState(calendarDateTime)]). State is passed through to both DatePicker and TimePicker, and is therefor common to both. |
The props listed below can be passed to DateTimePicker and will be passed through to DatePicker and TimePicker.
Name | Default | |
---|---|---|
earliestDate | 01/01/0001 | The earliest selectable datetime. Expects a vanilla Javascript Date object. |
latestDate | 12/31/9999 | The latest selectable datetime. Expects a vanilla Javascript Date object. |
monthFormat | "MMMM" | Format that gets passed to date-fns format function when displaying the month. See: Unicode Date Field Symbol Table |
yearFormat | "yyyy" | Format that gets passed to date-fns format function when displaying the year. See: Unicode Date Field Symbol Table |
Name | Default | |
---|---|---|
restrictTimeToDay | true | If true, the Selected Calendar Day won't advance to next day when the time selected increases past 12:00am, nor retreat to the previous day when selected time decreases before 12:00am. |
intervalStep | 15 | Number of minutes to advance or retreat the selected time. |
format | "p" | Format that gets passed to date-fns format function when displaying the time. See: Unicode Date Field Symbol Table |
See: https://nuclearhorsestudios.github.io/yardtp-datetimepicker/#styling
MIT © Michael Lasky