Date Picker

A date picker component with range and presets. Opens a popover anchored to the trigger; on compact touch screens it becomes a bottom sheet. Picking a date closes it.

Usage

@Local date: SparkDate | undefined = undefined;

SDatePicker({ value: this.date!! })

Approximate web preview — the HarmonyOS rendering is the reference.

Locale & format

format: 'PPP' (default) | 'YYYY-MM-DD' | 'MMM d, yyyy' …

SDatePicker({ value: this.date!!, locale: 'zh', placeholder: '选择日期', format: 'YYYY-MM-DD' })

Approximate web preview — the HarmonyOS rendering is the reference.

Date range

Closes once both ends are picked.

@Local range: SparkDateRange = new SparkDateRange();

SDateRangePicker({ value: this.range!! })

Approximate web preview — the HarmonyOS rendering is the reference.

API

Extracted from the @Param / @Event / @BuilderParam declarations in the library sources.

SDatePicker

shadcn-vue Date Picker (Popover + Calendar).

Outline-button trigger (triggerWidth, default 240vp); the calendar opens in a popover below the trigger (aligned to its start) and in a bottom sheet on compact touch windows (adaptive: 'auto'). Picking a day closes it. format: 'PPP' (default: 'Oct 12, 2026' / '2026年10月12日'), 'YYYY-MM-DD', 'MMM d, yyyy' …

Prop	Type	Default	Description
value!!	SparkDate | undefined	undefined
placeholder	ResourceStr	$r('app.string.spark_pick_date')
format	string	'PPP'
locale	SparkDateLocale SparkDateLocale = 'en' | 'zh'	'en'
minDate	SparkDate | undefined	undefined
maxDate	SparkDate | undefined	undefined
disabledDates	SparkDateMatcher | undefined	undefined
weekStartsOn	SparkWeekStart SparkWeekStart = 0 | 1	1
disabled	boolean	false
triggerWidth	Length	240	trigger width (shadcn w-[240px])
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'

Event	Type	Default	Description
onValueChange	(d: SparkDate | undefined) => void	() => { }

SDateRangePicker

Date range picker: the {@link SDatePicker} trigger with an {@link SRangeCalendar} (two months side by side when the window allows). Closes once both ends are picked.

Prop	Type	Default	Description
value!!	SparkDateRange | undefined	undefined
placeholder	ResourceStr	$r('app.string.spark_pick_date_range')
format	string	'PPP'
locale	SparkDateLocale SparkDateLocale = 'en' | 'zh'	'en'
minDate	SparkDate | undefined	undefined
maxDate	SparkDate | undefined	undefined
disabledDates	SparkDateMatcher | undefined	undefined
weekStartsOn	SparkWeekStart SparkWeekStart = 0 | 1	1
disabled	boolean	false
triggerWidth	Length	300
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'

Event	Type	Default	Description
onValueChange	(r: SparkDateRange) => void	() => { }