日期输入

通过原生日期输入收集一个日历日期，并保留浏览器、语言环境与移动平台已经提供的选择体验。

安装Terminal

npm install @a3s-lab/ui@0.4.1

<label for="target-date">目标日期</label>
<input
  id="target-date"
  class="input date-picker"
  type="date"
  value="2026-08-14"
  min="2024-01-01"
  max="2028-12-31"
  required
/>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

已归档冻结日

由发布策略锁定。原生控件保持禁用。

已发布上线日

供审计查看。值仍可随表单提交，但不可编辑。

<div class="grid gap-4" data-date-picker-availability="zh">
    <div class="field" data-disabled="true">
      <label for="date-disabled-zh">已归档冻结日</label>
      <input
        id="date-disabled-zh"
        class="input date-picker"
        type="date"
        value="2025-12-01"
        disabled
        aria-describedby="date-disabled-help-zh"
      />
      <p id="date-disabled-help-zh" data-field-description>
        由发布策略锁定。原生控件保持禁用。
      </p>
    </div>
    <div class="field" data-readonly="true">
      <label for="date-readonly-zh">已发布上线日</label>
      <input
        id="date-readonly-zh"
        class="input date-picker"
        type="date"
        value="2026-03-18"
        readonly
        aria-describedby="date-readonly-help-zh"
      />
      <p id="date-readonly-help-zh" data-field-description>
        供审计查看。值仍可随表单提交，但不可编辑。
      </p>
    </div>
  </div>

用法

<label for="target-date">目标日期</label>
<input
  id="target-date"
  class="input date-picker"
  type="date"
  value="2026-08-14"
  min="2024-01-01"
  max="2028-12-31"
  required
/>

请使用可见标签、本地日历边界的 min / max，以及字段级恢复文案。不要把值重新解释为 UTC。

契约

接口	值
根选择器	`input.date-picker`
原生根元素	`<input type="date">`
状态	`ready`, `disabled`, `invalid`, `read-only`
事件	`change`, `input`
方法	—

产品边界

它不拥有时区、日期范围、复发规则或自然语言解析。多个日期之间的关系由表单组合负责校验与解释。

组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

无障碍

始终提供可见标签，并在字段旁解释格式、边界与错误。占位符不能代替标签。禁用与只读使用原生属性，而不是单独依赖 aria-disabled / aria-readonly。

#日期输入

#用法

#契约

#产品边界

#无障碍

日期输入

用法

契约

产品边界

无障碍