DatePicker
The DatePicker component allows users to select a date from a calendar. The selected date is displayed in the trigger field.
Quick Start
- Installation
npm install @adaptavant/eds-core- Import
import { DatePicker } from '@adaptavant/eds-core';
Basic Example
The example below shows a basic implementation of the DatePicker.
The calendar prop is a render prop method which allows you to independently control the date picker's calendar. It exposes a close function to hide the calendar, preferably after a date is selected.
Refer Calendar documentation for more details.
const dateToBeShown = new Date(); // Today
const [selectedDate, setSelectedDate] = React.useState(dateToBeShown);
const [visibleMonth, setVisibleMonth] = React.useState(dateToBeShown);
return (
<Field label="Appointment date">
<DatePicker
calendar={({ close }) => (
<Calendar
initialFocus={true} // Used to focus today or first day of the month on mount
onValueChange={(date) => { // Used to update the selected date
if (date) {
setSelectedDate(date);
close(); // close the date picker when a date is selected
}
}}
onVisibleMonthChange={(date) => { // Used to update the visible month
if (date) {
setVisibleMonth(date);
}
}}
value={selectedDate}
visibleMonth={visibleMonth}
/>
)}
formattedValue={selectedDate?.toDateString()}
placeholder="Select a date"
/>
</Field>
);Label Visibility
The label should always be provided for assistive technology. However, if intended to hide it for sighted users, you can use labelVisibility="hidden".
const dateToBeShown = new Date();
const [selectedDate, setSelectedDate] = React.useState(dateToBeShown);
const [visibleMonth, setVisibleMonth] = React.useState(dateToBeShown);
return (
<Field label="Appointment date" labelVisibility="hidden">
<DatePicker
calendar={({ close }) => (
<Calendar
initialFocus={true}
onValueChange={(date) => {
if (date) {
setSelectedDate(date);
close();
}
}}
onVisibleMonthChange={(date) => {
if (date) {
setVisibleMonth(date);
}
}}
value={selectedDate}
visibleMonth={visibleMonth}
/>
)}
formattedValue={selectedDate?.toDateString()}
placeholder="Select a date"
/>
</Field>
);Placeholder
Use placeholder prop to guide user on the expected input. The placeholder updates to formattedValue when a date is selected.
const dateToBeShown = new Date(); // Today
const [selectedDate, setSelectedDate] = React.useState();
const [visibleMonth, setVisibleMonth] = React.useState(dateToBeShown);
return (
<Field label="Appointment date">
<DatePicker
calendar={({ close }) => (
<Calendar
initialFocus={true}
onValueChange={(date) => {
if (date) {
setSelectedDate(date);
close();
}
}}
onVisibleMonthChange={(date) => {
if (date) {
setVisibleMonth(date);
}
}}
value={selectedDate}
visibleMonth={visibleMonth}
/>
)}
formattedValue={selectedDate?.toDateString()}
placeholder="Select a date"
/>
</Field>
);Formatted Value
Use formattedValue to set the selected value in the date picker trigger. This prop allows passing custom elements or string to accomodate different date display formats.
const dateToBeShown = new Date(); // Today
const [selectedDate, setSelectedDate] = React.useState(dateToBeShown); // Default selected date
const [visibleMonth, setVisibleMonth] = React.useState(dateToBeShown);
return (
<Field label="Appointment date">
<DatePicker
calendar={({ close }) => (
<Calendar
initialFocus={true}
onValueChange={(date) => {
if (date) {
setSelectedDate(date);
close();
}
}}
onVisibleMonthChange={(date) => {
if (date) {
setVisibleMonth(date);
}
}}
value={selectedDate}
visibleMonth={visibleMonth}
/>
)}
formattedValue={selectedDate?.toDateString()} // Accepts any string / JSX element
placeholder="Select a date"
/>
</Field>
);Size
Use size prop on Field component to adjust the trigger size. Additionally, use size prop on Calendar component to control the calendar's dimensions
const dateToBeShown = new Date(); // Today
const [selectedDate, setSelectedDate] = React.useState();
const [visibleMonth, setVisibleMonth] = React.useState(dateToBeShown);
return (
<Box className="flex gap-4">
<Field label="Appointment date"> {/* with default 'standard' size field */}
<DatePicker
calendar={({ close }) => (
<Calendar // with 'small' size calendar
initialFocus={true}
onValueChange={(date) => {
if (date) {
setSelectedDate(date);
close();
}
}}
onVisibleMonthChange={(date) => {
if (date) {
setVisibleMonth(date);
}
}}
size="small"
value={selectedDate}
visibleMonth={visibleMonth}
/>
)}
formattedValue={selectedDate?.toDateString()}
placeholder="Select a date"
/>
</Field>
<Field label="Appointment date" size="large"> {/* with 'large' size field */}
<DatePicker
calendar={({ close }) => (
<Calendar // with default 'standard' size calendar
initialFocus={true}
onValueChange={(date) => {
if (date) {
setSelectedDate(date);
close();
}
}}
onVisibleMonthChange={(date) => {
if (date) {
setVisibleMonth(date);
}
}}
value={selectedDate}
visibleMonth={visibleMonth}
/>
)}
formattedValue={selectedDate?.toDateString()}
placeholder="Select a date"
/>
</Field>
</Box>
);Custom Trigger
The DatePicker supports a custom trigger as a render prop which allows full control over its appearance and behavior.
The following props are provided to the trigger render prop:
triggerProps: Props required for the triggerplaceholder: Placeholder text to be displayed when no date is selectedisOpen: Boolean indicating whether the date picker is open
const dateToBeShown = new Date('01-01-2024'); // 1st Jan 2024
const [selectedDate, setSelectedDate] = React.useState(dateToBeShown);
const [visibleMonth, setVisibleMonth] = React.useState(dateToBeShown);
return (
<Field label="Label" labelVisibility="hidden">
<DatePicker
calendar={({ close }) => (
<Calendar
initialFocus={true}
onValueChange={(date) => {
if (date) {
setSelectedDate(date);
}
close();
}}
onVisibleMonthChange={(date) => {
if (date) {
setVisibleMonth(date);
}
}}
value={selectedDate}
visibleMonth={visibleMonth}
/>
)}
placeholder="Select a date"
trigger={({ triggerProps, placeholder, isOpen }) => {
return (
<Button
{...triggerProps}
isPressed={isOpen}
size="large"
variant="neutralSecondary"
>
{selectedDate ? (
<Box className="flex items-center gap-1 text-secondary">
{selectedDate?.toDateString()}
</Box>
) : (
placeholder
)}
</Button>
);
}}
/>
</Field>
);Style API
Our design system components include style props that allow you to easily customize different parts of each component to match your design needs.
Please refer to the Style API documentation for more insights.
DatePicker parts
const dateToBeShown = new Date();
const [selectedDate, setSelectedDate] = React.useState(dateToBeShown);
const [visibleMonth, setVisibleMonth] = React.useState(dateToBeShown);
return (
<Field label="Appointment date" labelVisibility="hidden">
<DatePicker
calendar={({ close }) => (
<Calendar
initialFocus={true}
onValueChange={(date) => {
if (date) {
setSelectedDate(date);
close();
}
}}
onVisibleMonthChange={(date) => {
if (date) {
setVisibleMonth(date);
}
}}
value={selectedDate}
visibleMonth={visibleMonth}
/>
)}
formattedValue={selectedDate?.toDateString()}
placeholder="Select a date"
classNames={{
popover: 'border-2 border-status-available',
trigger: 'bg-inverse text-inverse hover:bg-inverse',
triggerChevron: 'fill-positive',
triggerLabel: 'font-mono pe-4',
triggerLabelTrack: 'border rounded-8px px-2',
}}
/>
</Field>
);The DatePicker component can be styled using the following properties:
Stylable Parts | Description |
|---|---|
popover | The popover element that displays the calendar. |
trigger | The element that triggers the popover. |
triggerChevron | The chevron in the trigger element. |
triggerLabel | The label in the trigger element. |
triggerLabelTrack | The label's track wrapper of the trigger element. |