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
props
as follow:
DateTimeInput can receive a number of 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