Preview

Usage

<cs-date-input value="2025-01-15" placeholder="YYYY/MM/DD"></cs-date-input>
<cs-date-input value="2025-01-15" disabled></cs-date-input>
<cs-date-input value="2025-01-15" invalid></cs-date-input>

Properties

aria-labelstring default: null

Adds an aria-label to the native control.

Use this if you don't have a visible label for this control.

aria-requiredboolean

Specifies whether to add aria-required to the native control.

auto-focusboolean default: false

Indicates whether the control should be focused as soon as the page loads, which enables the user to start typing without having to manually focus the control. Don't use this option on pages where the control may be scrolled out of the viewport.

disabledboolean

Specifies if the control is disabled, which prevents the user from modifying the value and prevents the value from being included in a form submission. A disabled control can't receive focus.

formatDateInputProps.Format

The format as it is displayed. It can take the following values:

• iso: ISO 8601 format without time, e.g.: 2024-01-30 (or 2024-01).
• long-localized: a more human-readable, localized format, e.g.: January 30, 2024 (or January, 2024).
• slashed: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01).

granularityDateInputProps.Granularity

Specifies the granularity at which users will be able to select a date. Defaults to day.

input-formatDateInputProps.InputFormat

Specifies the date format to use when the format is 'long-localized' and editing the date. The format of the input as it is being interacted with. It can take the following values:

• iso: ISO 8601 format without time, e.g.: 2024-01-30 (or 2024-01).
• slashed: similar to ISO 8601 but with '/' in place of '-'. e.g.: 2024/01/30 (or 2024/01).

localestring

Specifies the locale to use to render month names and determine the starting day of the week. If you don't provide this, the locale is determined by the page and browser locales. Supported values and formats are listed in the JavaScript Intl API specification.

namestring

Specifies the name of the control used in HTML forms.

placeholderstring default: 'YYYY/MM/DD'

Specifies the placeholder text rendered when the value is an empty string.

read-onlyboolean default: false

Specifies if the control is read-only, which prevents the user from modifying the value but includes it in a form submission. A read-only control can receive focus.

Don't use read-only inputs outside a form.

valuestringrequired

The current input value, in YYYY-MM-DD format.

Events

blurCustomEvent<null>

Called when input focus is removed from the UI control.

changeCustomEvent<InputProps.ChangeDetail>

Called whenever a user changes the input value (by typing or pasting). The event detail contains the current value of the field.

focusCustomEvent<null>

Called when input focus is moved to the UI control.