DatePicker

A date picker supporting four types — single date, date range, month, and datetime — with keyboard operation and Intl.DateTimeFormat formatting.

Basic Selection

Basic usage (type=date)

Example

Click the input to open the date panel; click a date to select it and close.

Date Range

Date range (type=daterange)

Example

A double-month grid: pick the start first, then the end; submits a JSON array ["start","end"]. Hovering previews the range.

Month Selection

Month (type=month)

Example

Datetime

Datetime (type=datetime)

Example

Pick the date and hour/minute/second, then click "确定" to submit.

Disabled Range

min / max limits

Example

Out-of-range dates are not selectable.

Custom Format

Custom format

Example

The format supports yyyy/MM/dd/HH/mm/ss tokens.

Controlled & Events

Controlled + oas-change event

Example

Disabled

Disabled

Example

API

Attributes

Attribute	Description	Type	Default
disabled	Disabled	boolean	—
format	Display format tokens (yyyy/MM/dd/HH/mm/ss)	string	—
max	Selectable range (ISO dates)	string	—
min	Selectable range (ISO dates)	string	—
placeholder	Placeholder text	—	—
type	Type: date / daterange / month / datetime	string	date
value	Current value: yyyy-MM-dd / yyyy-MM / yyyy-MM-ddTHH:mm:ss / JSON range array	string	—

Events

Event	Description
oas-change	Value change, detail: { value } (string array for daterange)

Keyboard: Enter / ↓ to open, ↑/↓/←/→ to move within the grid, Enter to select, Esc to close.