Datepicker
Provides a mechanism for users to choose a date via a calendar.
Installation
Install
yarn add @iag/chroma-react-ui.components
Import
import { Datepicker } from '@iag/chroma-react-ui.components';
Accessibility
Accessibility Documentation
(opens in new window)Default
Clear Date
This example works for both valid and invalid dates entered.
Use onChangeRaw for validation
Error
Valid
Disabled
Initial Value
Future Dates
isOutsideRange={(day) => day.startOf('day').isBefore(moment().startOf('day'))}
Past Dates
isOutsideRange={(day) => day.startOf('day').isAfter(moment().startOf('day'))}
Calendar Modal
withPortal
Calendar Direction
openDirection
= down
|| up
Properties
Name
Description
- classNamestringAdditional CSS classes to be applied
- idstringHTML id attribute for the component
- errorbooleanIndicates if there is an error state
- validbooleanIndicates if the input value is valid
- valueanyThe selected date value
- placeholderstringPlaceholder text when no date is selected
- ariaLabelstringAria label for accessibility
- screenReaderInputMessagestringScreen reader message for the input
- requiredbooleanIndicates if the field is required
- optionalbooleanIndicates if the field is optional
- disabledbooleanIndicates if the DatePicker is disabled
- initialVisibleMonth() => moment.Moment
- isOutsideRange(day: moment.Moment) => booleanFunction to determine if a day is outside the valid range
- isDayBlocked(day: moment.Moment) => booleanFunction to determine if a day is blocked
- numberOfMonthsnumberNumber of months to display in the calendar
- firstDayOfWeekDayOfWeekShapeThe first day of the week (0 for Sunday, 1 for Monday, etc.)
- onBlur(e: FocusEvent<Element, Element>) => voidCallback function when the input loses focus
- onChange*(dateObject: any) => voidCallback function when the date value changes
- onChangeRaw(s: string) => voidCallback function when the raw input value changes
- displayFormatstringThe format to display the selected date
- monthFormatstringThe format to display the month
- hideKeyboardShortcutsPanelbooleanIndicates whether to hide the keyboard shortcuts panel
- withPortalbooleanIndicates whether to render the calendar in a portal
- readOnlybooleanIndicates whether the DatePicker is read-only
- openDirection"up" | "down"The direction in which the calendar opens ('up' or 'down')
- onShow() => voidCallback function when the datepicker is opened
- onHide() => voidCallback function when the datepicker is closed