Date picker
Lets users select a date through a calendar without the need to manually type it in a field.
Props
type
calendar | input
Sets the date picker type. 'calendar' shows a calendar popup, 'input' shows just a date input.
Defaults to
calendar.
name
string
Name of the date field.
value
string
Value of the calendar date.
error
boolean
Sets the input to an error state.
Defaults to
false.
min
string
Minimum date value allowed.
max
string
Maximum date value allowed.
relative
string
This property has no effect and will be removed in a future version.
disabled
boolean
Disables the date picker.
Defaults to
false.
testId
string
Sets a data-testid attribute for automated testing.
width
string
Sets the width of the date picker input.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
Events
onChange
(event: Event) => void
_change
CustomEvent
Ask a user for a birthday
const [birthdate, setBirthdate] = useState<Date | undefined>(undefined);<GoabFormItem label="What is your date of birth?">
<GoabDatePicker
name="birthdate"
type="input"
value={birthdate}
onChange={(e) => setBirthdate(e.value)}
/>
</GoabFormItem>Confirm a change
const [open, setOpen] = useState(false);
const [effectiveDate, setEffectiveDate] = useState<Date | undefined>(new Date());
const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => {
setEffectiveDate(detail.value as Date);
};<GoabButton onClick={() => setOpen(true)}>Save and continue</GoabButton>
<GoabModal
heading="Address has changed"
open={open}
onClose={() => setOpen(false)}
actions={
<GoabButtonGroup alignment="end">
<GoabButton type="secondary" size="compact" onClick={() => setOpen(false)}>
Undo address change
</GoabButton>
<GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
Confirm
</GoabButton>
</GoabButtonGroup>
}>
<GoabContainer type="non-interactive" accent="filled" padding="compact" width="full">
<GoabText as="h4" mt="none" mb="s">Before</GoabText>
<GoabText mt="none">123456 78 Ave NW, Edmonton, Alberta</GoabText>
<GoabText as="h4" mt="none" mb="s">After</GoabText>
<GoabText mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</GoabText>
</GoabContainer>
<GoabFormItem label="Effective date" mt="l">
<GoabDatePicker
onChange={onChangeEffectiveDate}
name="effectiveDate"
value={effectiveDate}
/>
</GoabFormItem>
</GoabModal>Reset date picker field
const [date, setDate] = useState<Date | undefined>();
const setNewDate = (value: Date | undefined) => {
setDate(value);
};
function setValue() {
const d = new Date();
d.setDate(d.getDate() - 7);
setDate(d);
}
function clearValue() {
setDate(undefined);
}<GoabFormItem label="Date Picker">
<GoabDatePicker
name="item"
value={date}
onChange={(e) => setNewDate(e.value as Date)}
mb="xl"
/>
</GoabFormItem>
<GoabButtonGroup mt="xs" alignment="start">
<GoabButton onClick={setValue}>
Set Value
</GoabButton>
<GoabButton onClick={clearValue}>Clear Value</GoabButton>
</GoabButtonGroup>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.
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
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.