Description

Datepicker tools that wraps react-datepicker.

Note about importing

This component requires its consumers to manually import the third-party library's CSS

import 'react-datepicker/dist/react-datepicker.css';

Usage

• Required

<DateTimeInput
  label="Date Time input required"
  onChange={({ event, value }) => {}}
  type="dateTime"
  modifier="full-width"
  validationMessage="Date Time is required"
  error
  required
/>

• Disabled

<DateTimeInput
  label="Date Time input disabled"
  onChange={({ event, value }) => {}}
  type="dateTime"
  modifier="full-width"
  validationMessage="Date Time is disabled"
  error
  disabled
/>

• Pick only date

<DateTimeInput label="Date input" onChange={({ event, value }) => {}} type="date" modifier="full-width" />

• Pick only time

<DateTimeInput label="Date input" onChange={({ event, value }) => {}} type="time" modifier="full-width" />

API

DateTimeInput can receive a number of props as follow:

| NAME | TYPE | DEFAULT | | :---------------- | :--------------------------: | :--------------------: | | label | String | empty | | type | ['dateTime', 'date', 'time'] | dateTime | | value | String | empty | | validationMessage | String | This field is required | | disabled | Boolean | false | | required | Boolean | false | | error | Boolean | false | | onChange | Function | () => {} |

onChange events

The raw onChange events are inconsistent from the underlying component and when using the today button so the component makes sure to set the the following props on an event.target

• name: uses the component id prop
• value: the date from the event