CpDateRange 日期区间 / CpDateQuick 快捷日期

对齐旧版 DatePickerRange.html + DatePickerTitle.cshtml（62 处引用）：from/to 两个独立字段 + 快捷日期菜单（清空/昨天/今天/明天/周/月/年 13 档，编码 0~33 与旧版一致，周日起始）。

基础用法

基础用法

快捷菜单选择后同时回填 from/to；两输入框相互约束（开始不能晚于结束）；remember-key 记忆用户上次选择（对应旧版 timeKey）。

<template>
  <div class="demo-col">
    <CpDateRange v-model:from="from" v-model:to="to" remember-key="docs-demo" />
    <span class="demo-value"
      >from: {{ from || "-" }} ｜ to: {{ to || "-" }}</span
    >
  </div>
</template>

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

const from = ref("");
const to = ref("");
</script>

显示代码 ▼

API

属性 Props

属性	说明	类型	默认值
v-model:from	—	string	""
v-model:to	—	string	""
type	—	"date" | "datetime" | "month"	"date"
quick	是否显示快捷日期菜单（对应旧版 DatePickerTitle）	boolean	true
remember-key	—	string	—
restore	—	boolean	—
min-date	—	string	—
max-date	—	string	—
disabled	—	boolean	—
readonly	—	boolean	—
from-placeholder	—	string	"开始日期"
to-placeholder	—	string	"结束日期"
size	—	"large" | "default" | "small"	—

事件 Events

事件	说明	回调参数
@quickSelect	—	({ code: QuickRangeCode; from: string; to: string })

API

属性 Props

属性	说明	类型	默认值
v-model:from	—	string	""
v-model:to	—	string	""
label	—	string	"快捷日期"
size	—	"large" | "default" | "small"	"default"
remember-key	记忆用户上次选择的 key（对应旧版 timeKey），设置后自动保存	string	—
restore	挂载时自动恢复上次选择的区间	boolean	—

事件 Events

事件	说明	回调参数
@select	—	({ code: QuickRangeCode; from: string; to: string })

快捷日期编码（getDateRange）

编码	含义
0	清空
1 / 2 / 3	昨天 / 今天 / 明天
13 / 11 / 12	上周 / 本周 / 下周（周日起始）
23 / 21 / 22	上月 / 本月 / 下月
32 / 31 / 33	上年 / 本年 / 下年