uiUI 组件系统
对比

日历网格

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

安装、生命周期与完整 API ↗

INTERACTION NOTES

交互与可访问性

  • 日期单元有完整可读名称。
  • 月份切换与键盘方向移动要一致。

和相似组件的区别

Calendar 提供日期网格;Date Picker 在字段中组合网格与弹层。

RESEARCH & ALTERNATIVES

官方实现映射

以下是上游生态对同类交互的实现。上方运行的是 UI 自己的组件。

Bits UICalendar
官方提供

支持日期网格与可选范围。

Element PlusCalendar
官方提供

Vue 日期展示与选择。

关键状态

当前月已选择日期不可选日期范围起止

Vue / Nuxt、Svelte / SvelteKit · 来源核验

一起了解

日期选择器 ↗数据表格 ↗分页 ↗