A2UI 日期选择器 DatePicker

通过 Schema 配置生成 XDatePicker 日期选择器组件。

字段配置

{
  "name": "birthday",
  "label": "生日",
  "type": "date",
  "props": {
    "placeholder": "请选择日期",
    "format": "YYYY-MM-DD",
    "valueFormat": "YYYY-MM-DD",
    "clearable": true,
    "disabledDate": null
  },
  "rules": [
    { "type": "required", "message": "生日必填" }
  ]
}

Props 配置

属性	类型	默认值	说明
placeholder	string	'请选择日期'	占位文本
format	string	'YYYY-MM-DD'	显示格式
valueFormat	string	'YYYY-MM-DD'	值格式
clearable	boolean	true	可清空
disabled	boolean	false	禁用状态
type	string	'date'	类型（date/daterange等）

类型选项

type	说明
date	单日期选择
daterange	日期范围选择
datetime	日期时间选择
month	月份选择
year	年份选择

示例

基础日期选择

{ "name": "date", "label": "日期", "type": "date" }

日期范围选择

{
  "name": "dateRange",
  "label": "日期范围",
  "type": "date",
  "props": {
    "type": "daterange",
    "startPlaceholder": "开始日期",
    "endPlaceholder": "结束日期"
  }
}

带格式配置

{
  "name": "createTime",
  "label": "创建时间",
  "type": "date",
  "props": {
    "type": "datetime",
    "format": "YYYY-MM-DD HH:mm:ss",
    "valueFormat": "YYYY-MM-DD HH:mm:ss"
  }
}

渲染组件

A2UI Date 字段会渲染为 XTO UI 的 XDatePicker 组件：

<XDatePicker
  v-model="formData.birthday"
  placeholder="请选择日期"
  value-format="YYYY-MM-DD"
/>

相关链接

• XDatePicker 组件文档 - XTO UI 日期选择器详细说明
• A2UI 表单 - 表单整体配置