日历网格
Calendar
把日期按月或日期范围排列,支持就地浏览与选择。
2026 年 11 月
一二三四五六日
已选择 2026-11-02
app.mjs
import { mount } from '@sofish/ui/browser';
const view = mount(
document.querySelector('#example'),
'calendar'
);
view.element.addEventListener('ui:change', event => {
console.log(event.detail.value);
});
// view.update({ ...nextProps });
// view.destroy();什么时候用
页面内的日期选择、可用日期浏览。
什么时候不用
复杂事件排程需要专门 Scheduler,而不只是日期网格。
COMPONENT API
属性与事件
传入业务数据,通过事件连接你的应用。
| 属性 | 默认值 |
|---|---|
value | "2026-11-02" |
month | "" |
min | "" |
max | "" |
事件
ui:change ui:navigate
INTERACTION NOTES
交互与可访问性
- 日期单元有完整可读名称。
- 月份切换与键盘方向移动要一致。
和相似组件的区别
Calendar 提供日期网格;Date Picker 在字段中组合网格与弹层。
RESEARCH & ALTERNATIVES
官方实现映射
以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。
关键状态
Vue / Nuxt、Svelte / SvelteKit · 来源核验