Date input

To avoid misleading users, set the width of the input to correlate with the length of the expected answer. For example, an input for a three-digit value shouldn't be wide enough to accommodate a sentence worth of characters. See forms pattern for more information on layout.

• Use the DateInputSingle component when you need to allow users to select a single date.
• Use the DateInputRange component when you need to allow users to select a date range, between a start and end date.

Avoid using the DateInputSingle component if your application requires users to select a range of dates, in which case the DateInputRange component would be more appropriate.

To import DateInputSingle from the Salt date components package, use:

To import DateInputRange from the Salt date components package, use:

Date controls, require your application to contain a LocalizationProvider.

Date input accept dates in two formats:

Pass a date string (compatible with new Date()) via the defaultValue or value props.

Pass a date object from your configured date framework via the defaultDate or date props.

Default parsing behavior:

• For a single a null value represents an empty date to ensure controlled components work as expected.
• For date ranges, the startDate and endDate can be null to represent empty dates.
• Invalid dates are represents by the Invalid Date object from the configured date framework.

This default behavior ensures consistent and reliable date parsing, but it can be customized by providing a custom parse function through the parse prop.

By default, both DateInputSingle and DateInputRange format dates to DD MMM YYYY.

Formatting of entered dates occurs once the value is applied, either by the input losing it's focus or if the 'ENTER' is pressed.

Additionally, you can provide your own formatter through the format prop.

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

DateInputSingle and DateInputRange use the locale of the configured date adapter provided by the nearest 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.

Both DateInputSingle and DateInputRange accept 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 (un-supported by date-fns).
• "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".