Socket
Socket
Sign inDemoInstall

react-date-picker

Package Overview
Dependencies
Maintainers
1
Versions
259
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-date-picker - npm Package Compare versions

Comparing version 10.5.2 to 10.6.0

221

dist/cjs/DatePicker.d.ts

@@ -11,44 +11,265 @@ import React from 'react';

export type DatePickerProps = {
/**
* 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-date-picker"` to the main React-Date-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;
/**
* Whether to close the calendar on value selection.
*
* **Note**: It's recommended to use `shouldCloseCalendar` function instead.
*
* @default true
* @example false
*/
closeCalendar?: boolean;
/**
* `data-testid` attribute for the main React-Date-Picker `<div>` element.
*
* @example 'date-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;
/**
* Whether the date 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`.
*
* **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.
*
* @example 'y-MM-dd'
*/
format?: string;
/**
* `id` attribute for the main React-Date-Picker `<div>` element.
*
* @example 'date-picker'
*/
id?: string;
/**
* Whether the calendar should be opened.
*
* @default false
* @example true
*/
isOpen?: boolean;
/**
* Locale that should be used by the date 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-Date-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 `"month"`, `"year"`, `"decade"` or `"century"`.
*
* @default 'month'
* @example 'year'
*/
maxDetail?: Detail;
/**
* Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-Picker will ensure that no earlier date is selected.
*
* @example new Date()
*/
minDate?: Date;
/**
* `aria-label` for the month input.
*
* @example 'Month'
*/
monthAriaLabel?: string;
/**
* `placeholder` for the month input.
*
* @default '--'
* @example 'mm'
*/
monthPlaceholder?: string;
/**
* Input name.
*
* @default 'date'
*/
name?: string;
/**
* `aria-label` for the native date 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 date. 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 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 date.
*
* @example () => alert('Invalid date')
*/
onInvalidChange?: () => void;
/**
* Whether to open the calendar on input focus. **Note**: It's recommended to use `shouldOpenCalendar` function instead.
*
* @default true
* @example false
*/
openCalendarOnFocus?: boolean;
/**
* Element to render the calendar in using portal.
*
* @example document.getElementById('my-div')
*/
portalContainer?: HTMLElement | null;
/**
* Whether date input should be required.
*
* @default false
* @example true
*/
required?: boolean;
/**
* 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.
*
* @default 'start'
* @example 'range'
*/
returnValue?: 'start' | 'end' | 'range';
/**
* Function called before the calendar closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the calendar will not close.
*
* @example ({ reason }) => reason !== 'outsideAction'
*/
shouldCloseCalendar?: (props: {
reason: CloseReason;
}) => boolean;
/**
* Function called before the calendar opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the calendar will not open.
*
* @example ({ reason }) => reason !== 'focus'
*/
shouldOpenCalendar?: (props: {
reason: OpenReason;
}) => boolean;
/**
* Whether leading zeros should be rendered in date 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)
* @example [new Date(2017, 0, 1), new Date(2017, 7, 1)]
* @example ['2017-01-01', '2017-08-01']
*/
value?: LooseValue;
/**
* `aria-label` for the year input.
*
* @example 'Year'
*/
yearAriaLabel?: string;
/**
* `placeholder` for the year input.
*
* @default '----'
* @example 'yyyy'
*/
yearPlaceholder?: string;

@@ -55,0 +276,0 @@ } & CalendarProps & Omit<EventProps, 'onChange' | 'onFocus'>;

221

dist/esm/DatePicker.d.ts

@@ -11,44 +11,265 @@ import React from 'react';

export type DatePickerProps = {
/**
* 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-date-picker"` to the main React-Date-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;
/**
* Whether to close the calendar on value selection.
*
* **Note**: It's recommended to use `shouldCloseCalendar` function instead.
*
* @default true
* @example false
*/
closeCalendar?: boolean;
/**
* `data-testid` attribute for the main React-Date-Picker `<div>` element.
*
* @example 'date-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;
/**
* Whether the date 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`.
*
* **Note**: When using SSR, setting this prop may help resolving hydration errors caused by locale mismatch between server and client.
*
* @example 'y-MM-dd'
*/
format?: string;
/**
* `id` attribute for the main React-Date-Picker `<div>` element.
*
* @example 'date-picker'
*/
id?: string;
/**
* Whether the calendar should be opened.
*
* @default false
* @example true
*/
isOpen?: boolean;
/**
* Locale that should be used by the date 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-Date-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 `"month"`, `"year"`, `"decade"` or `"century"`.
*
* @default 'month'
* @example 'year'
*/
maxDetail?: Detail;
/**
* Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-Picker will ensure that no earlier date is selected.
*
* @example new Date()
*/
minDate?: Date;
/**
* `aria-label` for the month input.
*
* @example 'Month'
*/
monthAriaLabel?: string;
/**
* `placeholder` for the month input.
*
* @default '--'
* @example 'mm'
*/
monthPlaceholder?: string;
/**
* Input name.
*
* @default 'date'
*/
name?: string;
/**
* `aria-label` for the native date 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 date. 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 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 date.
*
* @example () => alert('Invalid date')
*/
onInvalidChange?: () => void;
/**
* Whether to open the calendar on input focus. **Note**: It's recommended to use `shouldOpenCalendar` function instead.
*
* @default true
* @example false
*/
openCalendarOnFocus?: boolean;
/**
* Element to render the calendar in using portal.
*
* @example document.getElementById('my-div')
*/
portalContainer?: HTMLElement | null;
/**
* Whether date input should be required.
*
* @default false
* @example true
*/
required?: boolean;
/**
* 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.
*
* @default 'start'
* @example 'range'
*/
returnValue?: 'start' | 'end' | 'range';
/**
* Function called before the calendar closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the calendar will not close.
*
* @example ({ reason }) => reason !== 'outsideAction'
*/
shouldCloseCalendar?: (props: {
reason: CloseReason;
}) => boolean;
/**
* Function called before the calendar opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the calendar will not open.
*
* @example ({ reason }) => reason !== 'focus'
*/
shouldOpenCalendar?: (props: {
reason: OpenReason;
}) => boolean;
/**
* Whether leading zeros should be rendered in date 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)
* @example [new Date(2017, 0, 1), new Date(2017, 7, 1)]
* @example ['2017-01-01', '2017-08-01']
*/
value?: LooseValue;
/**
* `aria-label` for the year input.
*
* @example 'Year'
*/
yearAriaLabel?: string;
/**
* `placeholder` for the year input.
*
* @default '----'
* @example 'yyyy'
*/
yearPlaceholder?: string;

@@ -55,0 +276,0 @@ } & CalendarProps & Omit<EventProps, 'onChange' | 'onFocus'>;

10

package.json
{
"name": "react-date-picker",
"version": "10.5.2",
"version": "10.6.0",
"description": "A date picker for your React app.",

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

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

@@ -121,3 +121,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",

@@ -136,4 +136,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"

@@ -140,0 +140,0 @@ },

86

README.md

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

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

@@ -21,3 +21,3 @@ # React-Date-Picker

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

@@ -89,43 +89,43 @@ ## Looking for a time picker or a datetime picker?

| Prop name | Description | Default value | Example values |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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-date-picker"` to the main React-Date-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> |
| closeCalendar | Whether to close the calendar on value selection. **Note**: It's recommended to use shouldCloseCalendar function instead. | `true` | `false` |
| data-testid | `data-testid` attribute for the main React-Date-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 date picker should be disabled. | `false` | `true` |
| disableCalendar | When set to `true`, will remove the calendar and the button toggling its visibility. | `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`. | n/a | `"y-MM-dd"` |
| isOpen | Whether the calendar should be opened. | `false` | `true` |
| locale | Locale that should be used by the date 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-Date-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 `"month"`, `"year"`, `"decade"` or `"century"`. | `"month"` | `"year"` |
| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-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"` |
| monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` |
| monthPlaceholder | `placeholder` for the month input. | `"--"` | `"mm"` |
| name | Input name. | `"date"` | `"myCustomName"` |
| nativeInputAriaLabel | `aria-label` for the native date 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 date. 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)` |
| 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 date. | n/a | `() => alert('Invalid date')` |
| openCalendarOnFocus | Whether to open the calendar on input focus. **Note**: It's recommended to use shouldOpenCalendar function instead. | `true` | `false` |
| portalContainer | Element to render the calendar in using portal. | n/a | `document.getElementById('my-div')` |
| required | Whether date input should be required. | `false` | `true` |
| 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"` |
| shouldCloseCalendar | Function called before the calendar closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the calendar will not close. | n/a | `({ reason }) => reason !== 'outsideAction'` |
| shouldOpenCalendar | Function called before the calendar opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the calendar will not open. | n/a | `({ reason }) => reason !== 'focus'` |
| showLeadingZeros | Whether leading zeros should be rendered in date 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)`</li><li>String: `"2017-01-01"`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li><li>An array of strings: `["2017-01-01", "2017-08-01"]`</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 |
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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-date-picker"` to the main React-Date-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> |
| closeCalendar | Whether to close the calendar on value selection. **Note**: It's recommended to use `shouldCloseCalendar` function instead. | `true` | `false` |
| data-testid | `data-testid` attribute for the main React-Date-Picker `<div>` element. | n/a | `"date-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` |
| disabled | Whether the date 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`. **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"` |
| id | `id` attribute for the main React-Date-Picker `<div>` element. | n/a | `"date-picker"` |
| isOpen | Whether the calendar should be opened. | `false` | `true` |
| locale | Locale that should be used by the date 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-Date-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 `"month"`, `"year"`, `"decade"` or `"century"`. | `"month"` | `"year"` |
| minDate | Minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although React-Date-Picker will ensure that no earlier date is selected. | n/a | Date: `new Date()` |
| monthAriaLabel | `aria-label` for the month input. | n/a | `"Month"` |
| monthPlaceholder | `placeholder` for the month input. | `"--"` | `"mm"` |
| name | Input name. | `"date"` | `"myCustomName"` |
| nativeInputAriaLabel | `aria-label` for the native date 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 date. 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)` |
| 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 date. | n/a | `() => alert('Invalid date')` |
| openCalendarOnFocus | Whether to open the calendar on input focus. **Note**: It's recommended to use `shouldOpenCalendar` function instead. | `true` | `false` |
| portalContainer | Element to render the calendar in using portal. | n/a | `document.getElementById('my-div')` |
| required | Whether date input should be required. | `false` | `true` |
| 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"` |
| shouldCloseCalendar | Function called before the calendar closes. `reason` can be `"buttonClick"`, `"escape"`, `"outsideAction"`, or `"select"`. If it returns `false`, the calendar will not close. | n/a | `({ reason }) => reason !== 'outsideAction'` |
| shouldOpenCalendar | Function called before the calendar opens. `reason` can be `"buttonClick"` or `"focus"`. If it returns `false`, the calendar will not open. | n/a | `({ reason }) => reason !== 'focus'` |
| showLeadingZeros | Whether leading zeros should be rendered in date 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)`</li><li>String: `"2017-01-01"`</li><li>An array of dates: `[new Date(2017, 0, 1), new Date(2017, 7, 1)]`</li><li>An array of strings: `["2017-01-01", "2017-08-01"]`</li></ul> |
| yearAriaLabel | `aria-label` for the year input. | n/a | `"Year"` |
| yearPlaceholder | `aria-label` for the year input. | `"----"` | `"yyyy"` |

@@ -132,0 +132,0 @@ ### Calendar

src/DatePicker.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