Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-datetime-picker

Package Overview
Dependencies
Maintainers
1
Versions
69
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-datetime-picker - npm Package Compare versions

Comparing version 5.5.3 to 5.6.0

283

dist/cjs/DateTimePicker.d.ts

@@ -13,46 +13,300 @@ import React from 'react';

export type DateTimePickerProps = {
/**
* `aria-label` for the AM/PM select input.
*
* @example 'Select AM/PM'
*/
amPmAriaLabel?: string;
/**
* Automatically focuses the input on mount.
*
* @example true
*/
autoFocus?: boolean;
/**
* `aria-label` for the calendar button.
*
* @example 'Toggle calendar'
*/
calendarAriaLabel?: string;
/**
* Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.
*
* @example 'class1 class2'
* @example ['class1', 'class2 class3']
*/
calendarClassName?: ClassName;
/**
* Content of the calendar button. Setting the value explicitly to `null` will hide the icon.
*
* @example 'Calendar'
* @example <CalendarIcon />
* @example CalendarIcon
*/
calendarIcon?: IconOrRenderFunction | null;
/**
* Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element.
*
* @example 'class1 class2'
* @example ['class1', 'class2 class3']
*/
className?: ClassName;
/**
* `aria-label` for the clear button.
*
* @example 'Clear value'
*/
clearAriaLabel?: string;
/**
* Content of the clear button. Setting the value explicitly to `null` will hide the icon.
*
* @example 'Clear'
* @example <ClearIcon />
* @example ClearIcon
*/
clearIcon?: IconOrRenderFunction | null;
/**
* Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.
*
* @example 'class1 class2'
* @example ['class1', 'class2 class3']
*/
clockClassName?: ClassName;
/**
* Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead.
*
* @default true
* @example false
*/
closeWidgets?: boolean;
/**
* `data-testid` attribute for the main React-DateTime-Picker `<div>` element.
*
* @example 'datetime-picker'
*/
'data-testid'?: string;
/**
* `aria-label` for the day input.
*
* @example 'Day'
*/
dayAriaLabel?: string;
/**
* `placeholder` for the day input.
*
* @default '--'
* @example 'dd'
*/
dayPlaceholder?: string;
/**
* When set to `true`, will remove the calendar and the button toggling its visibility.
*
* @default false
* @example true
*/
disableCalendar?: boolean;
/**
* When set to `true`, will remove the clock.
*
* @default false
* @example true
*/
disableClock?: boolean;
/**
* Whether the date time picker should be disabled.
*
* @default false
* @example true
*/
disabled?: boolean;
/**
* Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`.
*
* **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.
*
* @example 'y-MM-dd h:mm:ss a'
*/
format?: string;
/**
* `aria-label` for the hour input.
*
* @example 'Hour'
*/
hourAriaLabel?: string;
/**
* `placeholder` for the hour input.
*
* @default '--'
* @example 'hh'
*/
hourPlaceholder?: string;
/**
* `id` attribute for the main React-DateTime-Picker `<div>` element.
*
* @example 'datetime-picker'
*/
id?: string;
/**
* Whether the calendar should be opened.
*
* @default false
* @example true
*/
isCalendarOpen?: boolean;
/**
* Whether the clock should be opened.
*
* @default false
* @example true
*/
isClockOpen?: boolean;
/**
* Locale that should be used by the datetime picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).
*
* **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.
*
* @example 'hu-HU'
*/
locale?: string;
/**
* Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateTime-Picker will ensure that no later date is selected.
*
* @example new Date()
*/
maxDate?: Date;
/**
* The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"hour"`, `"minute"` or `"second"`.
*
* Don't need hour picking? Try [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker)!
*
* @default 'minute'
* @example 'second'
*/
maxDetail?: Detail;
/**
* Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTimeRange-Picker will ensure that no earlier date is selected.
*
* @example new Date()
*/
minDate?: Date;
/**
* `aria-label` for the minute input.
*
* @example 'Minute'
*/
minuteAriaLabel?: string;
/**
* `placeholder` for the minute input.
*
* @default '--'
* @example 'mm'
*/
minutePlaceholder?: string;
/**
* `aria-label` for the month input.
*
* @example 'Month'
*/
monthAriaLabel?: string;
/**
* `placeholder` for the month input.
*
* @default '--'
* @example 'mm'
*/
monthPlaceholder?: string;
/**
* Input name.
*
* @default 'datetime'
*/
name?: string;
/**
* `aria-label` for the native datetime input.
*
* @example 'Date'
*/
nativeInputAriaLabel?: string;
/**
* Function called when the calendar closes.
*
* @example () => alert('Calendar closed')
*/
onCalendarClose?: () => void;
/**
* Function called when the calendar opens.
*
* @example () => alert('Calendar opened')
*/
onCalendarOpen?: () => void;
/**
* Function called when the user picks a valid datetime. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base".
*
* @example (value) => alert('New date is: ', value)
*/
onChange?: (value: Value) => void;
/**
* Function called when the clock closes.
*
* @example () => alert('Clock closed')
*/
onClockClose?: () => void;
/**
* Function called when the clock opens.
*
* @example () => alert('Clock opened')
*/
onClockOpen?: () => void;
/**
* Function called when the user focuses an input.
*
* @example (event) => alert('Focused input: ', event.target.name)
*/
onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
/**
* Function called when the user picks an invalid datetime.
*
* @example () => alert('Invalid datetime');
*/
onInvalidChange?: () => void;
/**
* Whether to open the widgets on input focus.
*
* **Note**: It's recommended to use `shouldOpenWidgets` function instead.
*
* @default true
* @example false
*/
openWidgetsOnFocus?: boolean;
/**
* Element to render the widgets in using portal.
*
* @example document.getElementById('my-div')
*/
portalContainer?: HTMLElement | null;
/**
* Whether datetime input should be required.
*
* @default false
* @example true
*/
required?: boolean;
/**
* `aria-label` for the second input.
*
* @example 'Second'
*/
secondAriaLabel?: string;
/**
* `placeholder` for the second input.
*
* @default '--'
* @example 'ss'
*/
secondPlaceholder?: string;
/**
* Function called before the widgets close. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. `widget` can be `"calendar"` or `"clock"`. If it returns `false`, the widget will not close.
*
* @example ({ reason, widget }) => reason !== 'outsideAction' && widget === 'calendar'`
*/
shouldCloseWidgets?: (props: {

@@ -62,2 +316,7 @@ reason: CloseReason;

}) => boolean;
/**
* Function called before the widgets open. `reason` can be `"buttonClick"` or `"focus"`. `widget` can be `"calendar"` or `"clock"`. If it returns `false`, the widget will not open.
*
* @example ({ reason, widget }) => reason !== 'focus' && widget === 'calendar'`
*/
shouldOpenWidgets?: (props: {

@@ -67,5 +326,29 @@ reason: OpenReason;

}) => boolean;
/**
* Whether leading zeros should be rendered in datetime inputs.
*
* @default false
* @example true
*/
showLeadingZeros?: boolean;
/**
* Input value. Note that if you pass an array of values, only first value will be fully utilized.
*
* @example new Date(2017, 0, 1, 22, 15)
* @example [new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]
* @example ["2017-01-01T22:15:00", "2017-01-01T23:45:00"]
*/
value?: LooseValue;
/**
* `aria-label` for the year input.
*
* @example 'Year'
*/
yearAriaLabel?: string;
/**
* `placeholder` for the year input.
*
* @default '----'
* @example 'yyyy'
*/
yearPlaceholder?: string;

@@ -72,0 +355,0 @@ } & CalendarProps & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>;

283

dist/esm/DateTimePicker.d.ts

@@ -13,46 +13,300 @@ import React from 'react';

export type DateTimePickerProps = {
/**
* `aria-label` for the AM/PM select input.
*
* @example 'Select AM/PM'
*/
amPmAriaLabel?: string;
/**
* Automatically focuses the input on mount.
*
* @example true
*/
autoFocus?: boolean;
/**
* `aria-label` for the calendar button.
*
* @example 'Toggle calendar'
*/
calendarAriaLabel?: string;
/**
* Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element.
*
* @example 'class1 class2'
* @example ['class1', 'class2 class3']
*/
calendarClassName?: ClassName;
/**
* Content of the calendar button. Setting the value explicitly to `null` will hide the icon.
*
* @example 'Calendar'
* @example <CalendarIcon />
* @example CalendarIcon
*/
calendarIcon?: IconOrRenderFunction | null;
/**
* Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element.
*
* @example 'class1 class2'
* @example ['class1', 'class2 class3']
*/
className?: ClassName;
/**
* `aria-label` for the clear button.
*
* @example 'Clear value'
*/
clearAriaLabel?: string;
/**
* Content of the clear button. Setting the value explicitly to `null` will hide the icon.
*
* @example 'Clear'
* @example <ClearIcon />
* @example ClearIcon
*/
clearIcon?: IconOrRenderFunction | null;
/**
* Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element.
*
* @example 'class1 class2'
* @example ['class1', 'class2 class3']
*/
clockClassName?: ClassName;
/**
* Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead.
*
* @default true
* @example false
*/
closeWidgets?: boolean;
/**
* `data-testid` attribute for the main React-DateTime-Picker `<div>` element.
*
* @example 'datetime-picker'
*/
'data-testid'?: string;
/**
* `aria-label` for the day input.
*
* @example 'Day'
*/
dayAriaLabel?: string;
/**
* `placeholder` for the day input.
*
* @default '--'
* @example 'dd'
*/
dayPlaceholder?: string;
/**
* When set to `true`, will remove the calendar and the button toggling its visibility.
*
* @default false
* @example true
*/
disableCalendar?: boolean;
/**
* When set to `true`, will remove the clock.
*
* @default false
* @example true
*/
disableClock?: boolean;
/**
* Whether the date time picker should be disabled.
*
* @default false
* @example true
*/
disabled?: boolean;
/**
* Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`.
*
* **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.
*
* @example 'y-MM-dd h:mm:ss a'
*/
format?: string;
/**
* `aria-label` for the hour input.
*
* @example 'Hour'
*/
hourAriaLabel?: string;
/**
* `placeholder` for the hour input.
*
* @default '--'
* @example 'hh'
*/
hourPlaceholder?: string;
/**
* `id` attribute for the main React-DateTime-Picker `<div>` element.
*
* @example 'datetime-picker'
*/
id?: string;
/**
* Whether the calendar should be opened.
*
* @default false
* @example true
*/
isCalendarOpen?: boolean;
/**
* Whether the clock should be opened.
*
* @default false
* @example true
*/
isClockOpen?: boolean;
/**
* Locale that should be used by the datetime picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag).
*
* **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.
*
* @example 'hu-HU'
*/
locale?: string;
/**
* Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateTime-Picker will ensure that no later date is selected.
*
* @example new Date()
*/
maxDate?: Date;
/**
* The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"hour"`, `"minute"` or `"second"`.
*
* Don't need hour picking? Try [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker)!
*
* @default 'minute'
* @example 'second'
*/
maxDetail?: Detail;
/**
* Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTimeRange-Picker will ensure that no earlier date is selected.
*
* @example new Date()
*/
minDate?: Date;
/**
* `aria-label` for the minute input.
*
* @example 'Minute'
*/
minuteAriaLabel?: string;
/**
* `placeholder` for the minute input.
*
* @default '--'
* @example 'mm'
*/
minutePlaceholder?: string;
/**
* `aria-label` for the month input.
*
* @example 'Month'
*/
monthAriaLabel?: string;
/**
* `placeholder` for the month input.
*
* @default '--'
* @example 'mm'
*/
monthPlaceholder?: string;
/**
* Input name.
*
* @default 'datetime'
*/
name?: string;
/**
* `aria-label` for the native datetime input.
*
* @example 'Date'
*/
nativeInputAriaLabel?: string;
/**
* Function called when the calendar closes.
*
* @example () => alert('Calendar closed')
*/
onCalendarClose?: () => void;
/**
* Function called when the calendar opens.
*
* @example () => alert('Calendar opened')
*/
onCalendarOpen?: () => void;
/**
* Function called when the user picks a valid datetime. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base".
*
* @example (value) => alert('New date is: ', value)
*/
onChange?: (value: Value) => void;
/**
* Function called when the clock closes.
*
* @example () => alert('Clock closed')
*/
onClockClose?: () => void;
/**
* Function called when the clock opens.
*
* @example () => alert('Clock opened')
*/
onClockOpen?: () => void;
/**
* Function called when the user focuses an input.
*
* @example (event) => alert('Focused input: ', event.target.name)
*/
onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
/**
* Function called when the user picks an invalid datetime.
*
* @example () => alert('Invalid datetime');
*/
onInvalidChange?: () => void;
/**
* Whether to open the widgets on input focus.
*
* **Note**: It's recommended to use `shouldOpenWidgets` function instead.
*
* @default true
* @example false
*/
openWidgetsOnFocus?: boolean;
/**
* Element to render the widgets in using portal.
*
* @example document.getElementById('my-div')
*/
portalContainer?: HTMLElement | null;
/**
* Whether datetime input should be required.
*
* @default false
* @example true
*/
required?: boolean;
/**
* `aria-label` for the second input.
*
* @example 'Second'
*/
secondAriaLabel?: string;
/**
* `placeholder` for the second input.
*
* @default '--'
* @example 'ss'
*/
secondPlaceholder?: string;
/**
* Function called before the widgets close. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. `widget` can be `"calendar"` or `"clock"`. If it returns `false`, the widget will not close.
*
* @example ({ reason, widget }) => reason !== 'outsideAction' && widget === 'calendar'`
*/
shouldCloseWidgets?: (props: {

@@ -62,2 +316,7 @@ reason: CloseReason;

}) => boolean;
/**
* Function called before the widgets open. `reason` can be `"buttonClick"` or `"focus"`. `widget` can be `"calendar"` or `"clock"`. If it returns `false`, the widget will not open.
*
* @example ({ reason, widget }) => reason !== 'focus' && widget === 'calendar'`
*/
shouldOpenWidgets?: (props: {

@@ -67,5 +326,29 @@ reason: OpenReason;

}) => boolean;
/**
* Whether leading zeros should be rendered in datetime inputs.
*
* @default false
* @example true
*/
showLeadingZeros?: boolean;
/**
* Input value. Note that if you pass an array of values, only first value will be fully utilized.
*
* @example new Date(2017, 0, 1, 22, 15)
* @example [new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]
* @example ["2017-01-01T22:15:00", "2017-01-01T23:45:00"]
*/
value?: LooseValue;
/**
* `aria-label` for the year input.
*
* @example 'Year'
*/
yearAriaLabel?: string;
/**
* `placeholder` for the year input.
*
* @default '----'
* @example 'yyyy'
*/
yearPlaceholder?: string;

@@ -72,0 +355,0 @@ } & CalendarProps & ClockProps & Omit<EventProps, 'onChange' | 'onFocus'>;

10

package.json
{
"name": "react-datetime-picker",
"version": "5.5.3",
"version": "5.6.0",
"description": "A date range picker for your React app.",

@@ -45,3 +45,3 @@ "type": "module",

"test": "yarn lint && yarn tsc && yarn prettier && yarn unit",
"tsc": "tsc --noEmit",
"tsc": "tsc",
"unit": "vitest",

@@ -79,3 +79,3 @@ "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\""

"@testing-library/dom": "^9.0.0",
"@testing-library/jest-dom": "^5.15.0",
"@testing-library/jest-dom": "^6.0.0",
"@testing-library/react": "^14.0.0",

@@ -95,4 +95,4 @@ "@testing-library/user-event": "^14.4.0",

"rimraf": "^3.0.0",
"typescript": "^5.0.0",
"vitest": "^0.34.0",
"typescript": "^5.3.2",
"vitest": "^1.0.2",
"vitest-canvas-mock": "^0.2.2"

@@ -99,0 +99,0 @@ },

110

README.md

@@ -1,2 +0,2 @@

[![npm](https://img.shields.io/npm/v/react-datetime-picker.svg)](https://www.npmjs.com/package/react-datetime-picker) ![downloads](https://img.shields.io/npm/dt/react-datetime-picker.svg) [![CI](https://github.com/wojtekmaj/react-datetime-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-datetime-picker/actions)
[![npm](https://img.shields.io/npm/v/react-datetime-picker.svg)](https://www.npmjs.com/package/react-datetime-picker) ![downloads](https://img.shields.io/npm/dt/react-datetime-picker.svg) [![CI](https://github.com/wojtekmaj/react-datetime-picker/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-datetime-picker/actions)

@@ -20,3 +20,3 @@ # React-DateTime-Picker

[Online demo](http://projects.wojtekmaj.pl/react-datetime-picker/) is also available!
[Online demo](https://projects.wojtekmaj.pl/react-datetime-picker/) is also available!

@@ -89,55 +89,55 @@ ## Looking for _just_ a date picker or a time picker?

| Prop name | Description | Default value | Example values |
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| amPmAriaLabel | `aria-label` for the AM/PM select input. | n/a | `"Select AM/PM"` |
| autoFocus | Automatically focuses the input on mount. | n/a | `true` |
| calendarAriaLabel | `aria-label` for the calendar button. | n/a | `"Toggle calendar"` |
| calendarClassName | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| calendarIcon | Content of the calendar button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li><li>React function: `CalendarIcon`</li></ul> |
| className | Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| clearAriaLabel | `aria-label` for the clear button. | n/a | `"Clear value"` |
| clearIcon | Content of the clear button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li><li>React function: `ClearIcon`</li></ul> |
| clockClassName | Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| closeWidgets | Whether to close the widgets on value selection. **Note**: It's recommended to use shouldCloseWidgets function instead. | `true` | `false` |
| data-testid | `data-testid` attribute for the main React-DateTime-Picker `<div>` element. | n/a | `"date-picker"` |
| dayAriaLabel | `aria-label` for the day input. | n/a | `"Day"` |
| dayPlaceholder | `placeholder` for the day input. | `"--"` | `"dd"` |
| disabled | Whether the datetime picker should be disabled. | `false` | `true` |
| disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` |
| disableClock | When set to `true`, will remove the clock. | `false` | `true` |
| format | Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`. | n/a | `"y-MM-dd h:mm:ss a"` |
| hourAriaLabel | `aria-label` for the hour input. | n/a | `"Hour"` |
| hourPlaceholder | `placeholder` for the hour input. | `"--"` | `"hh"` |
| isCalendarOpen | Whether the calendar should be opened. | `false` | `true` |
| isClockOpen | Whether the clock should be opened. | `false` | `true` |
| locale | Locale that should be used by the datetime picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). | User's browser settings | `"hu-HU"` |
| maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateTime-Picker will ensure that no later date is selected. | n/a | Date: `new Date()` |
| maxDetail | The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"hour"`, `"minute"` or `"second"`. Don't need hour picking? Try [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker)! | `"minute"` | `"second"` |
| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTime-Picker will ensure that no earlier date is selected. | n/a | Date: `new Date()` |
| minDetail | The least detailed calendar view that the user shall see. Can be `"month"`, `"year"`, `"decade"` or `"century"`. | `"century"` | `"decade"` |
| minuteAriaLabel | `aria-label` for the minute input. | n/a | `"Minute"` |
| minutePlaceholder | `placeholder` for the minute input. | `"--"` | `"mm"` |
| monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` |
| monthPlaceholder | `placeholder` for the month input. | `"--"` | `"mm"` |
| name | Input name. | `"datetime"` | `"myCustomName"` |
| nativeInputAriaLabel | `aria-label` for the native datetime input. | n/a | `"Date"` |
| onCalendarClose | Function called when the calendar closes. | n/a | `() => alert('Calendar closed')` |
| onCalendarOpen | Function called when the calendar opens. | n/a | `() => alert('Calendar opened')` |
| onChange | Function called when the user picks a valid datetime. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base". | n/a | `(value) => alert('New date is: ', value)` |
| onClockClose | Function called when the clock closes. | n/a | `() => alert('Clock closed')` |
| onClockOpen | Function called when the clock opens. | n/a | `() => alert('Clock opened')` |
| onFocus | Function called when the focuses an input. | n/a | `(event) => alert('Focused input: ', event.target.name)` |
| onInvalidChange | Function called when the user picks an invalid datetime. | n/a | `() => alert('Invalid datetime')` |
| openWidgetsOnFocus | Whether to open the widgets on input focus. **Note**: It's recommended to use shouldOpenWidgets function instead. | `true` | `false` |
| portalContainer | Element to render the widgets in using portal. | n/a | `document.getElementById('my-div')` |
| returnValue | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed. | ` "start"` | `"range"` |
| required | Whether datetime input should be required. | `false` | `true` |
| secondAriaLabel | `aria-label` for the second input. | n/a | `"Second"` |
| secondPlaceholder | `placeholder` for the second input. | `"--"` | `"ss"` |
| shouldCloseWidgets | Function called before the widgets close. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. `widget` can be `"calendar"` or `"clock"`. If it returns `false`, the widget will not close. | n/a | `({ reason, widget }) => reason !== 'outsideAction' && widget === 'calendar'` |
| shouldOpenWidgets | Function called before the widgets open. `reason` can be `"buttonClick"` or `"focus"`. `widget` can be `"calendar"` or `"clock"`. If it returns `false`, the widget will not open. | n/a | `({ reason, widget }) => reason !== 'focus' && widget === 'calendar'` |
| showLeadingZeros | Whether leading zeros should be rendered in datetime inputs. | `false` | `true` |
| value | Input value. Note that if you pass an array of values, only first value will be fully utilized. | n/a | <ul><li>Date: `new Date(2017, 0, 1, 22, 15)`</li><li>String: `"2017-01-01T22:15:00"`</li><li>An array of dates: `[new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]`</li><li>An array of strings: `["2017-01-01T22:15:00", "2017-01-01T23:45:00"]`</li></ul> |
| yearAriaLabel | `aria-label` for the year input. | n/a | `"Year"` |
| yearPlaceholder | `aria-label` for the year input. | `"----"` | `"yyyy"` |
| Prop name | Description | Default value | Example values |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| amPmAriaLabel | `aria-label` for the AM/PM select input. | n/a | `"Select AM/PM"` |
| autoFocus | Automatically focuses the input on mount. | n/a | `true` |
| calendarAriaLabel | `aria-label` for the calendar button. | n/a | `"Toggle calendar"` |
| calendarClassName | Class name(s) that will be added along with `"react-calendar"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| calendarIcon | Content of the calendar button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li><li>React function: `CalendarIcon`</li></ul> |
| className | Class name(s) that will be added along with `"react-datetime-picker"` to the main React-DateTime-Picker `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| clearAriaLabel | `aria-label` for the clear button. | n/a | `"Clear value"` |
| clearIcon | Content of the clear button. Setting the value explicitly to `null` will hide the icon. | (default icon) | <ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li><li>React function: `ClearIcon`</li></ul> |
| clockClassName | Class name(s) that will be added along with `"react-clock"` to the main React-Calendar `<div>` element. | n/a | <ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul> |
| closeWidgets | Whether to close the widgets on value selection. **Note**: It's recommended to use `shouldCloseWidgets` function instead. | `true` | `false` |
| data-testid | `data-testid` attribute for the main React-DateTime-Picker `<div>` element. | n/a | `"datetime-picker"` |
| dayAriaLabel | `aria-label` for the day input. | n/a | `"Day"` |
| dayPlaceholder | `placeholder` for the day input. | `"--"` | `"dd"` |
| disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `false` | `true` |
| disableClock | When set to `true`, will remove the clock. | `false` | `true` |
| disabled | Whether the datetime picker should be disabled. | `false` | `true` |
| format | Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `y`, `M`, `MM`, `MMM`, `MMMM`, `d`, `dd`, `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`. **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | n/a | `"y-MM-dd h:mm:ss a"` |
| hourAriaLabel | `aria-label` for the hour input. | n/a | `"Hour"` |
| hourPlaceholder | `placeholder` for the hour input. | `"--"` | `"hh"` |
| id | `id` attribute for the main React-DateTime-Picker `<div>` element. | n/a | `"datetime-picker"` |
| isCalendarOpen | Whether the calendar should be opened. | `false` | `true` |
| isClockOpen | Whether the clock should be opened. | `false` | `true` |
| locale | Locale that should be used by the datetime picker and the calendar. Can be any [IETF language tag](https://en.wikipedia.org/wiki/IETF_language_tag). **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client. | Server locale/User's browser settings | `"hu-HU"` |
| maxDate | Maximum date that the user can select. Periods partially overlapped by maxDate will also be selectable, although React-DateTime-Picker will ensure that no later date is selected. | n/a | Date: `new Date()` |
| maxDetail | The most detailed calendar view that the user shall see. View defined here also becomes the one on which clicking an item in the calendar will select a date and pass it to onChange. Can be `"hour"`, `"minute"` or `"second"`. Don't need hour picking? Try [React-Date-Picker](https://github.com/wojtekmaj/react-date-picker)! | `"minute"` | `"second"` |
| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-DateTime-Picker will ensure that no earlier date is selected. | n/a | Date: `new Date()` |
| minuteAriaLabel | `aria-label` for the minute input. | n/a | `"Minute"` |
| minutePlaceholder | `placeholder` for the minute input. | `"--"` | `"mm"` |
| monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` |
| monthPlaceholder | `placeholder` for the month input. | `"--"` | `"mm"` |
| name | Input name. | `"datetime"` | `"myCustomName"` |
| nativeInputAriaLabel | `aria-label` for the native datetime input. | n/a | `"Date"` |
| onCalendarClose | Function called when the calendar closes. | n/a | `() => alert('Calendar closed')` |
| onCalendarOpen | Function called when the calendar opens. | n/a | `() => alert('Calendar opened')` |
| onChange | Function called when the user picks a valid datetime. If any of the fields were excluded using custom `format`, `new Date(y, 0, 1, 0, 0, 0)`, where `y` is the current year, is going to serve as a "base". | n/a | `(value) => alert('New date is: ', value)` |
| onClockClose | Function called when the clock closes. | n/a | `() => alert('Clock closed')` |
| onClockOpen | Function called when the clock opens. | n/a | `() => alert('Clock opened')` |
| onFocus | Function called when the user focuses an input. | n/a | `(event) => alert('Focused input: ', event.target.name)` |
| onInvalidChange | Function called when the user picks an invalid datetime. | n/a | `() => alert('Invalid datetime')` |
| openWidgetsOnFocus | Whether to open the widgets on input focus. **Note**: It's recommended to use `shouldOpenWidgets` function instead. | `true` | `false` |
| portalContainer | Element to render the widgets in using portal. | n/a | `document.getElementById('my-div')` |
| returnValue | Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed. | ` "start"` | `"range"` |
| required | Whether datetime input should be required. | `false` | `true` |
| secondAriaLabel | `aria-label` for the second input. | n/a | `"Second"` |
| secondPlaceholder | `placeholder` for the second input. | `"--"` | `"ss"` |
| shouldCloseWidgets | Function called before the widgets close. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. `widget` can be `"calendar"` or `"clock"`. If it returns `false`, the widget will not close. | n/a | `({ reason, widget }) => reason !== 'outsideAction' && widget === 'calendar'` |
| shouldOpenWidgets | Function called before the widgets open. `reason` can be `"buttonClick"` or `"focus"`. `widget` can be `"calendar"` or `"clock"`. If it returns `false`, the widget will not open. | n/a | `({ reason, widget }) => reason !== 'focus' && widget === 'calendar'` |
| showLeadingZeros | Whether leading zeros should be rendered in datetime inputs. | `false` | `true` |
| value | Input value. Note that if you pass an array of values, only first value will be fully utilized. | n/a | <ul><li>Date: `new Date(2017, 0, 1, 22, 15)`</li><li>String: `"2017-01-01T22:15:00"`</li><li>An array of dates: `[new Date(2017, 0, 1, 22, 15), new Date(2017, 0, 1, 23, 45)]`</li><li>An array of strings: `["2017-01-01T22:15:00", "2017-01-01T23:45:00"]`</li></ul> |
| yearAriaLabel | `aria-label` for the year input. | n/a | `"Year"` |
| yearPlaceholder | `aria-label` for the year input. | `"----"` | `"yyyy"` |

@@ -144,0 +144,0 @@ ### Calendar

src/DateTimePicker.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc