Date picker
Lets users select a date through a calendar without the need to manually type it in a field.
Props
disabled
boolean
Disables the date picker.
error
boolean
Sets the input to an error state.
max
Date | string
Maximum date value allowed.
min
Date | string
Minimum date value allowed.
name
string
Name of the date field.
testId
string
Sets a data-testid attribute for automated testing.
type
GoabDatePickerInputType
Sets the date picker type. 'calendar' shows a calendar popup, 'input' shows just a date input.
Defaults to
calendar.
value
Date | string | undefined
Value of the calendar date, as a Date object or an ISO date string (yyyy-mm-dd).
width
string
Sets the width of the date picker input.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
Events
onBlur
(detail: GoabDatePickerOnBlurDetail) => void
Callback fired when focus leaves all of the date picker's internal fields.
onChange
(detail: GoabDatePickerOnChangeDetail) => void
Callback fired when the selected date changes.
onFocus
(detail: GoabDatePickerOnFocusDetail) => void
Callback fired when focus enters any of the date picker's internal fields.
Types
Do
Use the calendar date picker for selecting dates relative to today, or when seeing the day of week is helpful.
Do
Use the input date picker for known dates far in the past or future, such as a birthday.
Tip
DatePicker handles most date inputs. Use type='input' (a dropdown for month and text inputs for day and year) for known dates like birthdays, far in the past or far in the future. Use type='calendar' (a popup calendar) for dates closer to the current day when the user is picking from available days, like booking or scheduling.
Other
Do
Indicate unavailable dates to help users avoid invalid selections.
The form item automatically associates the label with the input for screen readers, ensuring your form is accessible.
Do
Use a form item wrapper on all inputs to add a label, helper text, error message, and more.
States
Tip
Set appropriate min and max dates for your use case. A birthdate field should limit to past dates, a booking field to future dates.
When you must disable a button or input:
- Provide nearby text explaining what needs to happen first
- Consider showing the element enabled with validation on submit instead
- Use aria-describedby to link the disabled element to explanatory text
Don't
Don't disable buttons or inputs without explaining why. Disabled controls can be confusing and users may not understand why they can't interact with an element.
