NOTE: all date components expect their value to be an ISO 8601 date string
(without the time signature), which follows the format yyyy-mm-dd
Alternatives The kind of date (exact, approximate, memorable) you are requesting from the
user will determine which component is best to use.
DateInput — When the date is memorable or distant, such as a date of birth
DatePicker Allows the user to view, type and pick dates from a calendar.
const [ value , setValue ] = useState ( ) ;
return (
< Field label = " Pay date " >
< DatePicker
label = " Pay date "
value = { value }
onChange = { setValue }
onClear = { ( ) => setValue ( undefined ) }
disabled
/>
</ Field >
) ;
size There are three options for the size, "medium" is the default.
const [ value , setValue ] = useState ( ) ;
return (
< Stack gap = " large " >
< Field label = " Medium (default) " >
< DatePicker
size = " medium "
value = { value }
onChange = { setValue }
onClear = { ( ) => setValue ( undefined ) }
/>
</ Field >
< Field label = " Small " >
< DatePicker
size = " small "
value = { value }
onChange = { setValue }
onClear = { ( ) => setValue ( undefined ) }
/>
</ Field >
< Field label = " Large " >
< DatePicker
size = " large "
value = { value }
onChange = { setValue }
onClear = { ( ) => setValue ( undefined ) }
/>
</ Field >
</ Stack >
) ;
disabled Disables the input.
Calendar props The date picker implements react-day-picker
under the hood. A subset of the
API is available to influence
the calendar appearance and behaviour:
const [ value , setValue ] = useState ( ) ;
const today = new Date ( ) ;
return (
< Field label = " Pay date " >
< DatePicker
disabledDays = { { before : today } }
fromMonth = { today }
value = { value }
onChange = { setValue }
onClear = { ( ) => setValue ( undefined ) }
/>
</ Field >
) ;
Notice that we're disallowing selection of days prior to today using the
disabledDays property. We're also disabling navigation to months prior to
today using fromMonth because they would not be selectable.
DateRangePicker The range picker functions much like the DatePicker except it lets the user select or type a date range.
const [ value , setValue ] = useState ( ) ;
return (
< Field label = " Pay period " >
< DateRangePicker
value = { value }
onChange = { setValue }
onClear = { ( ) => setValue ( undefined ) }
/>
</ Field >
) ;
Size The DateRangePicker accepts the same "size" property as the DatePicker.
disabled Disables the input.
Keyboard shortcuts t Selects todays date.
CalendarPicker A simple version of the DatePicker meant to be used for UIs that require filtering instead of forms. It does not have text input.
const [ value , setValue ] = useState ( new Date ( ) ) ;
return (
< CalendarPicker
label = { ` Pay date ${ value ? ` : $ { new Date ( value ) . toDateString ( ) } ` : '' } ` }
size = " small "
value = { value }
onChange = { setValue }
onClear = { ( ) => {
return setValue ( undefined ) ;
} }
/>
) ;
CalendarPicker A simple version of the DateRangePicker meant to be used for UIs that require filtering instead of forms. It does not have text input.
const [ value , setValue ] = useState <
| {
start ? : undefined | ISODate ;
end ? : undefined | ISODate ;
}
| undefined
> ( undefined ) ;
return (
< CalendarRangePicker
label = { ` Pay period ${
value ?. start ? ` : $ { new Date ( value . start ) . toDateString ( ) } - ` : ''
} ${ value ?. end ? `$ { new Date ( value . end ) . toDateString ( ) } ` : '' } ` }
size = " small "
value = { value }
onChange = { setValue }
onClear = { ( ) => {
return setValue ( undefined ) ;
} }
/>
) ;
