Date picker
Component
Lets users select a date through a calendar without the need to manually type it in a field.
Related components: Form itemComponent
function onChange(name: string, value: Date) {
console.log(name, value);
}<GoAFormItem label="Item">
<GoADatePicker onChange={onChange} name="item" value={new Date(2025,3,4)}></GoADatePicker>
</GoAFormItem>Properties
namestringName of the date field.
valuestring | undefinedValue of the calendar date.
errorbooleanSets the input to an error state. Defaults to
false.minstringMinimum date value allowed. Defaults to
5 year previous.maxstringMaximum date value allowed. Defaults to
5 years forward.mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xlApply margin to the top, right, bottom, and/or left of the component.
disabledbooleanDisables the date picker. Defaults to
false.relativebooleanSet to true if a parent element has a css position of relative. Defaults to
false.Examples
Reset example
export function Datepicker() {
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);
}
return (
<>
<GoAFormItem label="Item">
<GoADatePicker
name="item"
value={date}
onChange={(_, value) => setNewDate(value)}
mb="xl"
></GoADatePicker>
</GoAFormItem>
<GoAButtonGroup mt={"xs"} alignment={"start"}>
<GoAButton onClick={setValue} mr="l">Set Value</GoAButton>
<GoAButton onClick={clearValue}>Clear Value</GoAButton>
</GoAButtonGroup>
</>
);
}Book time in drop in hours