yardtp-datetimepicker - Yet Another React Datetime Picker

yardtp-datetimepicker is a blazingly unbenchmarked Datetime Picker component for React 16.8+ focusing on simplicity and accessiblity.

Install

npm install --save yardtp-datetimepicker

Dependencies

• date-fns
• react-jss

Peer Dependencies

• React 16.8+ (hooks)

Usage

Go to Live Examples

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} />
        </>
    );
}

Options

DateTimePicker

| 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.

DatePicker

| 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

TimePicker

| 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

Styling

See: https://nuclearhorsestudios.github.io/yardtp-datetimepicker/#styling

License

MIT © Michael Lasky