Date Picker 日期选择器

支持范围与预设的日期选择器。打开锚定在触发器上的弹出框；在紧凑触屏上变为底部面板。选中日期后自动关闭。

基础用法

@Local date: SparkDate | undefined = undefined;

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

网页近似预览，真机效果以 HarmonyOS 渲染为准。

语言与格式

format：'PPP'（默认）| 'YYYY-MM-DD' | 'MMM d, yyyy' ……

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

网页近似预览，真机效果以 HarmonyOS 渲染为准。

日期范围

两端都选好后关闭。

@Local range: SparkDateRange = new SparkDateRange();

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

网页近似预览，真机效果以 HarmonyOS 渲染为准。

API

从组件库源码中的 @Param / @Event / @BuilderParam 声明自动提取。

SDatePicker

shadcn-vue 的日期选择器（Popover + Calendar）。

触发器为 outline 按钮（triggerWidth，默认 240vp）；日历会在触发器下方的弹出框中打开（与其起始边对齐），在紧凑的触控窗口上则以底部面板的形式打开（adaptive: 'auto'）。选中某一天后会自动关闭。format：'PPP'（默认：'Oct 12, 2026' / '2026年10月12日'）、'YYYY-MM-DD'、'MMM d, yyyy' 等。

属性	类型	默认值	说明
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	触发器宽度（对应 shadcn 的 w-[240px]）
adaptive	SparkAdaptive SparkAdaptive = 'auto' | 'pointer' | 'touch'	'auto'

事件	类型	默认值	说明
onValueChange	(d: SparkDate | undefined) => void	() => { }

SDateRangePicker

日期范围选择器：{@link SDatePicker} 触发器配合 {@link SRangeCalendar}（窗口允许时并排显示两个月份）。两端都选中后自动关闭。

属性	类型	默认值	说明
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'

事件	类型	默认值	说明
onValueChange	(r: SparkDateRange) => void	() => { }