Yardtp-datetimepicker NPM

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