Site settings
Change the appearance of the site to suit your preferences
Datepicker
Date pickers allow you to select dates and periods.
DatePicker as "base," "floating," and "ghost."
<Stack> <form> <DatePicker size="sm" label="Core" variant="core" /> </form> <form> <DatePicker label="Floating" variant="floating" /> </form> <form> <DatePicker label="Ghost" variant="ghost" /> </form> </Stack>
A datePicker with year selection.
<form> <DatePicker label="Avreise" variant="core" showYearNavigation /> </form>
Example of controlled DateRangePicker. Use '@internationalized/date' to parse dates etc.
// import { parseDate } from '@internationalized/date'; () => { const [value, setValue] = React.useState(parseDate("2020-02-03")); return ( <DatePicker label="Controlled" value={value} onValueChange={(date) => setValue(date)} /> ); };
A datepicker with error text, for form validation
<form> <DatePicker label="Pick date" invalid errorText="Date is invalid" /> </form>
Datepicker inherits positioning props from popover. Use this to change default position of calendar.
<DatePicker positioning={{ placement: "top", }} label="Opens on top" />;
A dateRangePicker
<Stack> <form> <DateRangePicker variant="core" label="Core" startLabel="Avreise" endLabel="Hjemreise" startName="outward" endName="return" /> </form> <form> <DateRangePicker variant="floating" label="Floating" startLabel="Avreise" endLabel="Hjemreise" startName="outward" endName="return" /> </form> <form> <DateRangePicker variant="ghost" label="Ghost" startLabel="Avreise" endLabel="Hjemreise" startName="outward" endName="return" /> </form> </Stack>
Example of controlled input. Use '@internationalized/date' to parse dates etc.
// import { parseDate } from '@internationalized/date'; () => { const [value, setValue] = React.useState({ start: parseDate("2020-02-03"), end: parseDate("2020-02-10"), }); return ( <DateRangePicker label="Controlled DateRangePicker" value={value} onValueChange={(date) => setValue(date)} startLabel="Avreise" endLabel="Hjemreise" /> ); };
DatePicker inside modal.
By default DatePicker uses portal to render its popover, but this seems to cause problems in modals. Set withPortal to false
<DialogRoot> <DialogTrigger> <Button>Open DatePicker in Dialog</Button> </DialogTrigger> <DialogContent minHeight="50vh"> <DialogBody> <DatePicker withPortal={false} label="Inside Modal" /> </DialogBody> </DialogContent> </DialogRoot>;