Choose a version:

DateField

Captures date input from merchants. Provides a consistent interface for date selection, with proper validation.

Anchor to propertiesProperties

Anchor to details details string: Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

This will also be exposed to screen reader users.
Anchor to disabled disabled boolean Default: false: Disables the field, disallowing any interaction.
Anchor to error error string: Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.
Anchor to id id string: A unique identifier for the element.
Anchor to label label string: Content to use as the field label.
Anchor to value value string: The current value for the field. If omitted, the field will be empty.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events

Anchor to blur blur (event: <"s-date-field">) => void: Callback when the element loses focus.
Anchor to change change (event: <"s-date-field">) => void: Callback after editing completes (typically on blur).
Anchor to focus focus (event: <"s-date-field">) => void: Callback when the element receives focus.
Anchor to input input (event: <"s-date-field">) => void: Callback when the user makes any changes in the field.

CallbackEvent

bubbles
```
boolean
```
cancelable
```
boolean
```
composed
```
boolean
```
currentTarget
```
HTMLElementTagNameMap[T]
```
detail
```
any
```
eventPhase
```
number
```
target
```
HTMLElementTagNameMap[T] | null
```

interface CallbackEvent<T extends keyof HTMLElementTagNameMap> {
  currentTarget: HTMLElementTagNameMap[T];
  bubbles?: boolean;
  cancelable?: boolean;
  composed?: boolean;
  detail?: any;
  eventPhase: number;
  target: HTMLElementTagNameMap[T] | null;
}

Was this section helpful?

Code

<s-date-field

label="Date"

value="2025-10-08"

Preview

Anchor to examplesExamples

DateField usage patterns

Anchor to example-event-handlingEvent handling

Handle date input events

Was this section helpful?

Event handling

<s-date-field

label="Order date"

value="2024-10-26"

onInput={(event) => console.log('Input:', event.target.value)}

onChange={(event) => console.log('Change:', event.target.value)}

onFocus={(event) => console.log('Focused with:', event.target.value)}

onBlur={(event) => console.log('Blurred with:', event.target.value)}

Examples

Event handling

Description

Handle date input events

Default

<s-date-field 
  label="Order date"
  value="2024-10-26"
  onInput={(event) => console.log('Input:', event.target.value)}
  onChange={(event) => console.log('Change:', event.target.value)}
  onFocus={(event) => console.log('Focused with:', event.target.value)}
  onBlur={(event) => console.log('Blurred with:', event.target.value)}
/>