Choose a version:

DatePicker

Allow users to select a specific date.

Anchor to propertiesProperties

Anchor to id id string: A unique identifier for the element.
Anchor to value value string Default: "": Current selected value.

The default means no date is selected.

If the provided value is invalid, no date is selected.

Otherwise:

If type="single", this is a date in YYYY-MM-DD format.

If type="multiple", this is a comma-separated list of dates in YYYY-MM-DD format.

If type="range", this is a range in YYYY-MM-DD--YYYY-MM-DD format. The range is inclusive.

Was this section helpful?

Anchor to eventsEvents

Anchor to blur blur (event: <"s-divider">) => void
Anchor to change change (event: <"s-divider">) => void
Anchor to focus focus (event: <"s-divider">) => void
Anchor to input input (event: <"s-divider">) => void

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-button command="--show" commandFor="date-picker">

Show

</s-button>

<s-date-picker

id="date-picker"

value="2024-05-08"

onChange={onDateChange}

DatePicker

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEvent

Code

Examples

Code

Default

Preview