DatePicker provides a context to the children contained within it and a composable API that enables you to create your own date picker controls.

Salt provides the following children for convenience:

• DatePickerOverlay - a container component for the content of the DatePicker overlay.

When selectionVariant is "single":

• DatePickerSingleInput - a composable DateInput component pre-wired to the DatePicker selection context.
• DatePickerSinglePanel - a composable Calendar component pre-wired to the DatePicker selection context.

A composable API enables you to use provided child components, such as DatePickerSingleInput and DatePickerSinglePanel.

When selectionVariant is "range":

• DatePickerRangeInput - a composable DateInput component pre-wired to the DatePicker selection context.
• DatePickerRangePanel - composable Calendar components pre-wired to the DatePicker selection context.

A composable API enables you to use provided child components, such as DatePickerRangeInput and DatePickerRangePanel.

You can also compose your own overlay content with the provided components.

A composable API enables you to combine the provided child components with your own.

Use a DatePicker component when you need a visual and intuitive interface for selecting single dates or date ranges, making it ideal for financial applications, event scheduling, and project management. In contrast, use a Dropdown when the dates are pre-determined, the selection is infrequent, or a compact interface is required, such as selecting a birth year or a specific month in a form.

To improve consistency and simplify your messaging, recommend a single acceptable date format in the form field label and helper text—preferably the one most frequently used in your application.

To import DatePicker from the Salt lab package, use:

DatePickerSingleInput composes a DateInputSingle that uses the DatePicker context for single date selection.

DatePickerRangeInput composes a DateInputRange that uses the DatePicker context for date range selection.

DatePickerSinglePanel composes a Calendar that uses the DatePicker context for single date selection.

DatePickerRangePanel composes a Calendar that uses the DatePicker context for date range selection.

DatePickerOverlay is the container component for the DatePicker overlay.

DatePickerActions provides the controls to apply or cancel a date selection.

The useDatePicker hook provides state and helpers to manage the DatePicker state.

The useDatePickerOverlay hook provides state and helpers to manage the DatePickerOverlay state.