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.

By default, both DateInputSingle and DateInputRange accept a date string that can be passed to new Date().

If the date string is valid, it is converted to an ISO string and then parsed to a local date using parseAbsoluteToLocal(date.toISOString()). The resulting date is then returned as a CalendarDate object with the year, month, and day. This default behavior ensures consistent and reliable date parsing, but it can be overridden by providing a custom parse function through the parse prop.

Examples of valid date formats:

1. ISO 8601 string:
   • YYYY-MM-DD
   • YYYY-MM-DDTHH:MM:SSZ
   • YYYY-MM-DDTHH:MM:SS+HH:MM
   • Example: "2023-01-15", "2023-01-15T15:45:00Z"
2. RFC 2822 string:
   • DD MMM YYYY HH:MM:SS GMT
   • Example: "15 Jan 2023 15:45:00 GMT"
3. Date and Time String:
   • Month DD, YYYY HH:MM:SS
   • Example: "January 15, 2023 15:45:00"
4. Date only string:
   • Month DD, YYYY
   • Example: "January 15, 2023"
5. Milliseconds since epoch:
   • Number of milliseconds since January 1, 1970, 00:00:00 UTC.
   • Example: 1673793900000

Default parsing behavior:

• If the input date string is valid, it is converted to an ISO string using date.toISOString().
• The ISO string is then parsed to a local date using parseAbsoluteToLocal(date.toISOString()).
• The resulting date is returned as a CalendarDate object with the year, month, and day.
• If the date string is invalid, the function returns undefined.

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

Additionally, you can provide your own parse function to convert shorthand dates to valid date objects.

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 formatDate function to format DateValue to a string.

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] (../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".

To import DateInputSingle from the Salt lab package, use:

To import DateInputRange from the Salt lab package, use:

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.

By default, both DateInputSingle and DateInputRange accept a date string that can be passed to new Date().

If the date string is valid, it is converted to an ISO string and then parsed to a local date using parseAbsoluteToLocal(date.toISOString()). The resulting date is then returned as a CalendarDate object with the year, month, and day. This default behavior ensures consistent and reliable date parsing, but it can be overridden by providing a custom parse function through the parse prop.

Examples of valid date formats:

1. ISO 8601 string:
   • YYYY-MM-DD
   • YYYY-MM-DDTHH:MM:SSZ
   • YYYY-MM-DDTHH:MM:SS+HH:MM
   • Example: "2023-01-15", "2023-01-15T15:45:00Z"
2. RFC 2822 string:
   • DD MMM YYYY HH:MM:SS GMT
   • Example: "15 Jan 2023 15:45:00 GMT"
3. Date and Time String:
   • Month DD, YYYY HH:MM:SS
   • Example: "January 15, 2023 15:45:00"
4. Date only string:
   • Month DD, YYYY
   • Example: "January 15, 2023"
5. Milliseconds since epoch:
   • Number of milliseconds since January 1, 1970, 00:00:00 UTC.
   • Example: 1673793900000

Default parsing behavior:

• If the input date string is valid, it is converted to an ISO string using date.toISOString().
• The ISO string is then parsed to a local date using parseAbsoluteToLocal(date.toISOString()).
• The resulting date is returned as a CalendarDate object with the year, month, and day.
• If the date string is invalid, the function returns undefined.

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

Additionally, you can provide your own parse function to convert shorthand dates to valid date objects.

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 formatDate function to format DateValue to a string.

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] (../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".

To import DateInputSingle from the Salt lab package, use:

To import DateInputRange from the Salt lab package, use:

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.

By default, both DateInputSingle and DateInputRange accept a date string that can be passed to new Date().

If the date string is valid, it is converted to an ISO string and then parsed to a local date using parseAbsoluteToLocal(date.toISOString()). The resulting date is then returned as a CalendarDate object with the year, month, and day. This default behavior ensures consistent and reliable date parsing, but it can be overridden by providing a custom parse function through the parse prop.

Examples of valid date formats:

1. ISO 8601 string:
   • YYYY-MM-DD
   • YYYY-MM-DDTHH:MM:SSZ
   • YYYY-MM-DDTHH:MM:SS+HH:MM
   • Example: "2023-01-15", "2023-01-15T15:45:00Z"
2. RFC 2822 string:
   • DD MMM YYYY HH:MM:SS GMT
   • Example: "15 Jan 2023 15:45:00 GMT"
3. Date and Time String:
   • Month DD, YYYY HH:MM:SS
   • Example: "January 15, 2023 15:45:00"
4. Date only string:
   • Month DD, YYYY
   • Example: "January 15, 2023"
5. Milliseconds since epoch:
   • Number of milliseconds since January 1, 1970, 00:00:00 UTC.
   • Example: 1673793900000

Default parsing behavior:

• If the input date string is valid, it is converted to an ISO string using date.toISOString().
• The ISO string is then parsed to a local date using parseAbsoluteToLocal(date.toISOString()).
• The resulting date is returned as a CalendarDate object with the year, month, and day.
• If the date string is invalid, the function returns undefined.

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

Additionally, you can provide your own parse function to convert shorthand dates to valid date objects.

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 formatDate function to format DateValue to a string.

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] (../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".

To import DateInputSingle from the Salt lab package, use:

To import DateInputRange from the Salt lab package, use: