Date picker#

Events#

	Type	Description
`onChange`	`function`	(optional) Will be called on a date change event. Returns an object. See Returned Object below.
`onType`	`function`	(optional) Will be called on every input and date picker interaction. Returns an `object`. See Returned Object below.
`onSubmit`	`function`	(optional) Will be called once a user presses the submit button.
`onCancel`	`function`	(optional) Will be called once a user presses the cancel button.
`onReset`	`function`	(optional) Will be called once a user presses the reset button. The date picker will revert to the value it had when first rendered. If no initial value was provided, the date is cleared.
`onOpen`	`function`	(optional) Will be called once date-picker is visible.
`onClose`	`function`	(optional) Will be called once date-picker is hidden.
`onDaysRender`	`function`	(optional) Will be called before the days of each calendar view are rendered, and again on interactions such as hover and selection. Receives the `days` array and the calendar number (`0` for the first calendar, `1` for the second in range mode). Change the day objects, or return a new array, to customize the days. See Manipulate the days in the calendar view.
`onFocus`	`function`	(optional) Will be called once the input gets focus.
`onBlur`	`function`	(optional) Will be called once the input loses focus.
`onKeyDown`	`(event: React.KeyboardEvent<HTMLElement>) => void`	(optional) Will be called when a key is pressed while the date input has focus. Call `event.preventDefault()` to keep the key from being typed, e.g. to set the date with a keyboard shortcut. Check `event.metaKey` and `event.ctrlKey` to leave browser shortcuts alone.
`onKeyUp`	`(event: React.KeyboardEvent<HTMLElement>) => void`	(optional) Will be called when a key is released while the date input has focus.

Returned Object#

The type of native event will depend on the interaction. All additional HTML attributes will be returned as well.

{
  date: null | 'date as `returnFormat` | `yyyy-MM-dd`', /* Available if `range` is `false` */
  startDate: null | 'date as `returnFormat` | `yyyy-MM-dd`', /* Available if `range` is `true` */
  endDate: null | 'date as `returnFormat` | `yyyy-MM-dd`', /* Available if `range` is `true` */
  invalidDate: null | 'date as `returnFormat` | `yyyy-MM-dd`', /* Available if `range` is `false` */
  invalidStartDate: null | 'date as `returnFormat` | `yyyy-MM-dd`', /* Available if `range` is `true` */
  invalidEndDate: null | 'date as `returnFormat` | `yyyy-MM-dd`', /* Available if `range` is `true` */
  isValid: boolean, /* Available if `range` is `false` */
  isValidStartDate: boolean, /* Available if `range` is `true` */
  isValidEndDate: boolean, /* Available if `range` is `true` */
  daysBetween: number, /* Available if `range` is `true` */
  attributes: { attributes },
  event: null | { native event }
}

Suggest an edit