Date Picker

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 DateInputSingle component pre-wired to the DatePicker selection context.
• DatePickerSingleGridPanel - a composable Calendar grid pre-wired to the DatePicker selection context.

• 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.

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

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:

The default locale for Salt's date adapters is "enUS".

DatePicker uses the locale of the configured date adapter provided by the nearest [LocalizationProvider] (../LocalizationProvider). Configuration of locales is date framework specific and may require you to import specific locales from the date library you are using.

For example, if you are using date-fns, you may need to import the specific locale you want to use, such as es or frFR.

The default locale for Salt's date adapters is "enUS".

Refer to the documentation of the date library you are using for information on how to configure other locales.

DatePicker accepts a timezone prop that defines the timezone.

The default timezone for Salt's components is "default".

Valid values for timezone are date framework specific and can be one of the following:

• "default" uses the local timezone of the user's browser.
• "system" uses the timezone of the system running the code.
• "UTC" uses the UTC timezone.
• string uses a specific IANA timezone string, such as "America/New_York" or "Europe/London".

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.

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 DateInputSingle component pre-wired to the DatePicker selection context.
• DatePickerSingleGridPanel - a composable Calendar grid pre-wired to the DatePicker selection context.

• 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.

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

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:

The default locale for Salt's date adapters is "enUS".

DatePicker uses the locale of the configured date adapter provided by the nearest [LocalizationProvider] (../LocalizationProvider). Configuration of locales is date framework specific and may require you to import specific locales from the date library you are using.

For example, if you are using date-fns, you may need to import the specific locale you want to use, such as es or frFR.

The default locale for Salt's date adapters is "enUS".

Refer to the documentation of the date library you are using for information on how to configure other locales.

DatePicker accepts a timezone prop that defines the timezone.

The default timezone for Salt's components is "default".

Valid values for timezone are date framework specific and can be one of the following:

• "default" uses the local timezone of the user's browser.
• "system" uses the timezone of the system running the code.
• "UTC" uses the UTC timezone.
• string uses a specific IANA timezone string, such as "America/New_York" or "Europe/London".

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.

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 DateInputSingle component pre-wired to the DatePicker selection context.
• DatePickerSingleGridPanel - a composable Calendar grid pre-wired to the DatePicker selection context.

• 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.

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

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:

The default locale for Salt's date adapters is "enUS".

DatePicker uses the locale of the configured date adapter provided by the nearest [LocalizationProvider] (../LocalizationProvider). Configuration of locales is date framework specific and may require you to import specific locales from the date library you are using.

For example, if you are using date-fns, you may need to import the specific locale you want to use, such as es or frFR.

The default locale for Salt's date adapters is "enUS".

Refer to the documentation of the date library you are using for information on how to configure other locales.

DatePicker accepts a timezone prop that defines the timezone.

The default timezone for Salt's components is "default".

Valid values for timezone are date framework specific and can be one of the following:

• "default" uses the local timezone of the user's browser.
• "system" uses the timezone of the system running the code.
• "UTC" uses the UTC timezone.
• string uses a specific IANA timezone string, such as "America/New_York" or "Europe/London".

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.