Date 日期时间

avue-date：设置 valueFormat 时通常是字符串，不设置时由日期选择器使用 Date；范围类型绑定两项数组。

通用属性、字典与事件见 基础组件使用约定。模板属性可写为 kebab-case，Form 配置对象使用 camelCase。

基础用法

效果预览可直接操作下方示例

独立组件通过 v-model 绑定单个字段；在 Form 中使用时，将相应配置放入 column。

正在加载示例…

<template>
  <el-row :span="24">
    <el-col :span="6">
      值:{{ form }}<br />
      <avue-date v-model="form"
                 format="YYYY年MM月DD日"
                 value-format="YYYY-MM-DD"
                 placeholder="请选择日期"></avue-date>
      <el-col :span="24"></el-col>
    </el-col>
    <el-col :span="24"></el-col>
    <el-col :span="6">
      值:{{ form1 }}<br />
      <avue-date v-model="form1"
                 type="datetime"
                 format="YYYY年MM月DD日 HH:mm:ss"
                 value-format="YYYY-MM-DD HH:mm:ss"
                 placeholder="请选择日期"></avue-date>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref } from 'vue';

const form = ref('2020-01-01');
const form1 = ref('2020-01-01 12:00:00');
</script>

属性

属性	类型	默认值	说明
type	string	date	date / datetime / daterange / datetimerange / year / month / week 等
format / valueFormat	string	—	显示与绑定格式分别设置
defaultTime	string / Date / array	—	3.9.5 支持 HH:mm:ss 与两项字符串数组，也支持 Date/Date[]
shortcuts	array / function	—	快捷选项，常用 [{ text, value }]
disabledDate	function	—	返回 true 禁用对应 Date
disabledHours / disabledMinutes / disabledSeconds	function	—	返回禁用的时间数字数组
editable	boolean	true	允许直接输入
unlinkPanels	boolean	false	范围面板独立切换
singlePanel	boolean	undefined	是否单面板，需底层版本支持
showNow	boolean	false	显示此刻按钮
startPlaceholder / endPlaceholder / rangeSeparator	string	—	范围占位文字与分隔符
popperClass	string	—	弹层类名

defaultTime 不用于初始选中。完整类型与时刻对比见 Date 表单。旧版 pickerOptions 不再使用，禁用与快捷选项分别配置 disabledDate、shortcuts。