import { DateInput } from '@uhg-abyss/mobile';Important Note: The scrolling picker portion of this component is currently NOT accessible. The input box is accessible and can be used to enter a date or time with the keyboard. When a screen reader is active, the button to activate the picker will be hidden.
Usage
The DateInput component allows users to select a date or time from a picker. The picker will display a calendar for date selection and a time picker for time selection.
The time picker is an internal component, but Calendar is a separate component that can be used independently.
Keyboard Entry
Users can enter the date or time with the native keyboard by pressing the input box. The date or time entered can be read from the value prop. Use the onSubmit prop to handle the action when the submit key is pressed.
The date input will not accept an entry if it is not in the format of MM/DD/YYYY with leading zeros. The time input will not accept an entry if it is not in 12-hour hh:mm AM/PM format with leading zeros.
useState
The useState hook gets values from the component state. A date value is required and will be displayed in the input box and as the selected date or time on the picker.
Mode
Use the mode prop to define the type of picker. The default mode is set to "date"
Date
Time
Label
Use the label prop to display a label above the input menu.
Help Content
The helpContent prop is used to display a help icon in the top right of the container, which will display the provided content in a BottomSheet when pressed.
Required
Use the isRequired prop to display an asterisk next to the label.
Disabled
Set the isDisabled prop to true to disable the date picker.
Messages
Use the errorMessage and successMessage props to display a custom error or success message below the menu.
Excluded Dates
To exclude dates use the excludeDate prop. Set a function that receives date as an argument and returns true if date should be disabled. For example, to disable weekends, check if the day is 0 or 6.
Min/Max Date
Date
Use the minimumDate and maximumDate props to set the min and max dates in the Calendar dropdown.
Time
Use the minimumDate and maximumDate props to set the min and max times in the Time dropdown.
onInvalidEntry
Use the onInvalidEntry prop to handle the date validation. The function returns an object
{ value: Date, input: string, code: number, message: string } where value is the Date instance of the user's attempted entry,
input is the string submitted by the user, code indicates a custom code that references a specific error and
message describes the error.
The explanation of code is noted below:
- 0 - Indicates the input date is invalid.
- 1 - Indicates the input is before the minimum date.
- 2 - Indicates the input is after the minimum date.
- 3 - Indicates the input is a disabled date.
DateInput Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| errorMessage | string | - | Sets the error message to be displayed below the date input field |
| excludeDate | Function | - | Callback fired to exclude dates from the calendar |
| helpButtonAccessibilityLabel | string | - | Sets the accessibility label for the help button |
| helpContent | string | ReactNode | - | When defined, displays a help icon that can be tapped to view the provided content in a modal screen |
| isDisabled | boolean | false | Flag to enable/disable the picker. If true, the picker will be disabled |
| isRequired | boolean | - | Visual indicator that a selection is required. If true, an asterisk will be displayed next to the label |
| label | string | - | Label for date or time input field |
| maximumDate | Date | - | Specifies the maximum selectable day by a user |
| minimumDate | Date | - | Specifies the minimum selectable day by a user |
| mode | date | time | date | Sets the mode of the date input to capture date or time entry |
| onChange | function | - | Callback fired every time the value changes |
| onInvalidEntry | function | - | Callback fired on date entry validation. Returns the entered date value |
| successMessage | string | - | Sets the success message to be displayed below the date input field |
| value | Date | - | Value of the date input |
DateInput Classes
| Class Name | Description |
|---|---|
| abyss-date-input | Date input element |
| abyss-date-input-bottom-sheet | Bottom sheet element |
| abyss-date-input-calendar | Calendar |
| abyss-date-input-format-text | Format text element |
| abyss-date-input-header | Header element |
| abyss-date-input-help-button | Help button |
| abyss-date-input-help-modal | Help modal |
| abyss-date-input-hint-text | Hint text element |
| abyss-date-input-icon | The date or time picker icon |
| abyss-date-input-icon-button | The date or time picker button |
| abyss-date-input-label | Label element |
| abyss-date-input-message | Message element |
| abyss-date-input-root | Root element |
| abyss-date-input-submit-button | Submit button element |
| abyss-date-input-time-picker | Time picker |
| abyss-input-help-icon | Help icon element |
| abyss-input-help-modal-close-button | Help modal close button |
| abyss-input-help-modal-footer | Help modal footer |
| abyss-input-message-icon | Message icon |
| abyss-input-message-text | Message text |
DateInput Translations
| Translation Key | Value |
|---|---|
| help | Help |
| close | Close |
| error | Error |
| success | Success |
| selected | Selected |
| DateInput.selectDate | Select Date |
| DateInput.selectTime | Select Time |
| TimePicker.hours | Hours |
| TimePicker.minutes | Minutes |
| TimePicker.AM | AM |
| TimePicker.PM | PM |
| Calendar.prevMonth | Previous Month |
| Calendar.nextMonth | Next Month |
| Calendar.year | Year |
| Calendar.today | Today |
| Calendar.inProgress | In Progress |
DateInput Tokens
| Token Name | Value | |
|---|---|---|
| input-header.color.text.label | #4B4D4F | |
| input-header.color.text.hint | #4B4D4F | |
| input-header.color.icon.help.rest | #196ECF | |
| input-header.color.icon.help.active | #004BA0 | |
| input-message.color.text.error | #990000 | |
| input-message.color.text.success | #007000 | |
| input-message.color.icon.error | #990000 | |
| input-message.color.icon.success | #007000 | |
| input-field.color.surface.default | #FFFFFF | |
| input-field.color.surface.disabled | #F3F3F3 | |
| input-field.color.text.input | #4B4D4F | |
| input-field.color.border.rest.default | #4B4D4F | |
| input-field.color.border.rest.error | #990000 | |
| input-field.color.border.rest.success | #007000 | |
| input-field.color.border.active.default | #196ECF | |
| input-field.color.border.active.error | #990000 | |
| input-field.color.border.active.success | #007000 | |
| input-field.color.icon.utility.rest | #4B4D4F | |
| input-field.color.icon.utility.disabled | #929496 | |
| input-field.color.icon.utility.active | #323334 | |
| input-field.border-radius.all.container | 4 | |
| input-field.border-width.all.container.rest | 1 | |
| input-field.border-width.all.container.active | 3 | |
| input-header.sizing.all.icon.help | 24 | |
| input-message.sizing.all.icon.leading | 20 | |
| input-field.sizing.icon.all.utility | 20 | |
| input-field.sizing.icon.all.picker | 20 | |
| input-container.spacing.gap.vertical.container | 8 | |
| input-header.spacing.gap.horizontal.container | 12 | |
| input-header.spacing.gap.horizontal.label | 4 | |
| input-header.spacing.gap.vertical.content | 4 | |
| input-message.spacing.gap.horizontal.container | 4 | |
| input-field.spacing.padding.all.field | 12 | |
| input-field.spacing.gap.horizontal.field | 12 | |
| input-field.spacing.gap.horizontal.input-indicator | 2 | |
| input-field.spacing.gap.horizontal.prefix-input | 2 | |
| input-field.box-shadow.container.active |
| |
| input-field.box-shadow.container.error |
| |
| input-field.box-shadow.container.success |
|