AutoStore

Appearance

Date ​

概述 ​

Date是日期选择组件，继承自Input，底层使用inputType=date渲染原生日期选择器，默认显示date图标。适合录入生日、活动日期等单日期场景。

示例 ​

声明一个日期字段只需要指定widget: 'date'，值采用YYYY-MM-DD格式的字符串。

ts
const form = document.querySelector('#form');
form.state = {
    birthday: configurable('1990-01-01', {
        label: '生日',
        widget: 'date',
    }),
};
loading

指南 ​

基础用法 ​

只需指定widget: 'date'即可获得原生日期选择能力：

ts
form.state = {
    eventDate: configurable('', {
        label: '活动日期',
        widget: 'date',
    }),
};

限制日期范围 ​

通过min/max限定可选日期的上下界（格式YYYY-MM-DD），范围外的日期无法被选中：

ts
form.state = {
    eventDate: configurable('', {
        label: '活动日期',
        widget: 'date',
        min: '2025-01-01', 
        max: '2025-12-30', 
    }),
};

清除按钮 ​

clearable=true时在输入框右侧显示清除按钮，一键清空已选日期：

ts
form.state = {
    eventDate: configurable('2025-12-12', {
        label: '活动日期',
        widget: 'date',
        clearable: true, 
    }),
};

属性 ​

属性 类型 默认值 说明
min string 最小日期，格式YYYY-MM-DD
max string 最大日期，格式YYYY-MM-DD
clearable boolean false 是否显示清除按钮

注意事项 ​

  • Date继承自Input，filled、pill、icon、pattern、actions等通用属性同样可用。
  • 底层基于原生<input type="date">，不同浏览器/移动端的日期选择界面存在差异，详见MDN input date。