简介

fs-form-date 是基于 ava-ui DateTimePicker 封装的日期/时间选择组件，可独立使用或配合 fs-form 使用。
支持日期、时间、日期时间三种模式，通过点击输入区域唤起选择器，并通过 change 事件向外部输出格式化后的值。

使用方法

局部引入时，在页面的 index.json 中配置（同时需要引入 dialog-center 作为弹层容器）：

"usingComponents": {
  "fs-form-date": "/avaui-sub/fs-form/fs-form-date/index",
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

配合 fs-form 使用时：

"usingComponents": {
  "fs-form": "/avaui-sub/fs-form/index",
  "fs-form-item": "/avaui-sub/fs-form/fs-form-item/index",
  "fs-form-date": "/avaui-sub/fs-form/fs-form-date/index",
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

PWC（自定义组件/插件）使用：仅 usingComponents 注册方式使用 avaComponent:// 协议，其他用法一致。

单独使用时：

"usingComponents": {
  "fs-form-date": "avaComponent://avaui-sub/fs-form/fs-form-date/index"
}

代码演示

1. 基础用法

默认以 date（日期）模式展示，通过 value 绑定值，通过 change 事件监听值变化。

2. 类型切换（type 属性）

通过 type 属性切换不同的选择模式：date（日期）、time（时间）、datetime（日期时间）。

3. 禁用状态

通过 disabled 属性禁用点击选择。

4. 配合 fs-form 使用

fs-form-date 可以作为 fs-form-item 的内容控件，支持表单校验和数据收集。

---

API

fs-form-date 属性

参数	说明	类型	可选值	默认值
value	当前值	String	—	''
placeholder	占位提示文字	String	—	''
type	选择类型	String	date / time / datetime	date
disabled	是否禁用	Boolean	—	false
starttime	起始时间（传递给 DateTimePicker）	String	—	''
endtime	结束时间（传递给 DateTimePicker）	String	—	''
bordered	是否显示边框，边框模式下同时显示类型图标	Boolean	—	false

fs-form-date 事件

事件名	说明	回调参数
change	选择完成后触发（用于 fs-form 更新及校验）

注意： change 事件开启了 bubbles: true 和 composed: true，可被 fs-form-item 捕获用于表单校验。

---

设计说明

• 展示样式与 fs-form-input 保持一致，统一表单视觉风格。
• 支持日期、时间、日期时间三种常用选择模式，满足大部分业务场景。
• 通过 starttime / endtime 控制可选范围，对齐 DateTimePicker 能力。
• 通过占位符显示提示文案，在未选择时指引用户操作。
• 开启 bordered 属性后输入框显示圆角边框，并在左侧展示类型图标（日历/时钟），适用于需要视觉区分的卡片风格场景。

---

打开预览