uiUI 组件系统
对比

日期选择器

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"原生日期控件,可键入或打开日历"
disabledfalse
id—
attributes—
placeholder—
required—
readOnly—
step—
minLength—
maxLength—
autocomplete—

事件

ui:change

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

INTERACTION NOTES

交互与可访问性

  • 日期格式、地区和可选范围要清楚。
  • 允许键盘输入,并正确处理日历面板焦点。

和相似组件的区别

Date Picker 绑定字段;Calendar 可以是页面中直接呈现的日期网格。

RESEARCH & ALTERNATIVES

官方实现映射

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

Element PlusDatePicker
官方提供

单日、范围及其他日期模式。

官方提供

Svelte 日期输入与弹层组合。

关键状态

未选择已选择无效日期范围选择

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

一起了解

日历网格 ↗单行文本输入 ↗表单与字段 ↗