sanjayradadiya / react-date-time-picker

🚧 🚧 🚧 pickers-inputs is deprecated. Due to the lack of maintainers and increased code complexity, pickers-inputs is now deprecated in favor of react-date-time-picker-tz.

You can find the old code of pickers-inputs here.

Pickers-Inputs

React component library for handling date, time, and dateTime pickers with zone handling and customizable formats.

Installation

You can install the package via npm or yarn:

npm install pickers-inputs
# or
yarn add pickers-inputs

Usage

Import InputPicker from pickers-inputs;

import { InputPicker, TimePicker } from "pickers-inputs";

Add InputPicker like this:

<InputPicker
  type="date"
  value={selectedDate}
  onChange={(newValue) => {
    setSelectedDate(newValue);
  }}
/>

Add TimePicker like this:

<TimePicker
  value={"2024-03-30 04:06:16 PM Asia/Calcutta"}
  onChange={(v) => {
    console.log(v);
  }}
  format="yyyy-LL-dd hh:mm:ss a z"
  outputZone="Europe/Moscow"
/>

InputPickerProps

Prop	Type	Description
type	"date", "time", "dateTime"	Select picker type.
value	string	Input value.
onChange	(value: string) => void	Fuction triggered when the value changes. Receives the new value as an argument.
format	string	Format the displayed value.(Input and output format will be the same.)
onHide	() => void	Fuction triggered when the picker is hidden.
onShow	() => void	Fuction triggered when the picker is shown.
mainContainerClassName	string	Class name(s) that will be added along with "main-box" to the main picker element.
mainContainerStyles	CSSProperties	Inline styles for the main container element.
selectedStyle	CSSProperties	Styles for the selected element.
outputZone	string	Specifies the output value based on the zone

Date Picker

Time Picker

Date-Time Picker