CpDate 日期输入

对齐旧版 Util.DateDbClick + WdatePicker 交互契约：输入框纯文本输入、双击空输入框回填今天、仅点击右侧图标弹出日历面板、失焦校验非法日期自动清空。

基础用法

基础用法

双击空输入框回填今天；单击只出现光标，点右侧日历图标才弹面板。

<template>
  <div class="demo-row">
    <CpDate v-model="date" style="width: 220px" />
    <span class="demo-value">{{ date || "双击输入框试试" }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const date = ref("");
</script>

显示代码 ▼

默认日期 / 只读 / 时间 / 范围

默认日期 / 只读 / 时间 / 范围

default-date 对应旧版 data-date_default；type=datetime 对应旧版 dateMinute；min-date/max-date 对应 data-min-date/data-max-date。

<template>
  <div class="demo-col">
    <div class="demo-row">
      <CpDate v-model="d1" default-date="2026-01-01" style="width: 220px" />
      <span class="demo-tip">default-date：双击回填 2026-01-01 而非今天</span>
    </div>
    <div class="demo-row">
      <CpDate v-model="d2" readonly style="width: 220px" />
      <span class="demo-tip">readonly：双击无效</span>
    </div>
    <div class="demo-row">
      <CpDate v-model="d3" type="datetime" style="width: 220px" />
      <span class="demo-tip">datetime：值格式 YYYY-MM-DD HH:mm</span>
    </div>
    <div class="demo-row">
      <CpDate
        v-model="d4"
        min-date="2026-07-01"
        max-date="2026-07-31"
        style="width: 220px"
      />
      <span class="demo-tip"
        >min/max：超出 2026-07 的手输值失焦清空，面板置灰</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const d1 = ref("");
const d2 = ref("");
const d3 = ref("");
const d4 = ref("");
</script>

显示代码 ▼

API

属性 Props

属性	说明	类型	默认值
v-model	—	string	""
type	—	"date" | "datetime" | "month"	"date"
value-format	值格式，默认按 type 推导：date=YYYY-MM-DD / datetime=YYYY-MM-DD HH:mm / month=YYYY-MM	string	—
default-date	双击回填的默认日期；未设置则回填今天（对应旧版 data-date_default）	string	—
min-date	—	string	—
max-date	—	string	—
disabled	—	boolean	—
readonly	—	boolean	—
placeholder	—	string	—

事件 Events

事件	说明	回调参数
@quickFill	—	(string)
@change	—	(string)