DatePicker 日期选择器
简介
添加时间前后禁用、限制选择范围属性，不需要重复写方法控制。ElDatePicker 原来所有属性都支持。
时间前后禁用
今天之前的时间禁用
-
今天之后的时间禁用
-
<template>
<el-row :gutter="50">
<el-col :span="24">
<div>今天之前的时间禁用</div>
<CxzDatePicker
v-model="value1"
:before-disabled-date="new Date()"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
></CxzDatePicker>
</el-col>
<el-col :span="24">
<div>今天之后的时间禁用</div>
<CxzDatePicker
v-model="value2"
:after-disabled-date="new Date()"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
></CxzDatePicker>
</el-col>
</el-row>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CxzDatePicker } from 'cxz-ui'
const value1 = ref()
const value2 = ref()
</script>限制选择范围
时间选择范围不超过3天
-
<template>
<div>时间选择范围不超过3天</div>
<CxzDatePicker
v-model="value"
type="daterange"
:date-range-limit="3"
:editable="false"
start-placeholder="开始日期"
end-placeholder="结束日期"
></CxzDatePicker>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CxzDatePicker } from 'cxz-ui'
const value = ref()
</script>DatePicker 新增属性
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| beforeDisabledDate | 在此之前的时间禁用 | String, Number, Date | undefined |
| afterDisabledDate | 在此之后的时间禁用 | String, Number, Date | undefined |
| dateRangeLimit | 能够选择的时间范围（天） | Number | undefined |