日期选择器
Date Picker
把日期输入与日历选择放在一个字段交互里。
原生日期控件,可键入或打开日历
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'date-picker'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
预约、起止时间或按日期筛选。
什么时候不用
只需显示日期时用文本,避免无意义输入。
COMPONENT API
属性与事件
传入业务数据,通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
label | "计划日期" |
name | "sample-date" |
value | "2026-11-02" |
min | "2026-01-01" |
max | "2027-12-31" |
help | "原生日期控件,可键入或打开日历" |
disabled | false |
id | — |
attributes | — |
placeholder | — |
required | — |
readOnly | — |
step | — |
minLength | — |
maxLength | — |
autocomplete | — |
事件
ui:change
INTERACTION NOTES
交互与可访问性
- 日期格式、地区和可选范围要清楚。
- 允许键盘输入,并正确处理日历面板焦点。
和相似组件的区别
Date Picker 绑定字段;Calendar 可以是页面中直接呈现的日期网格。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt、Svelte / SvelteKit · 来源核验