【Element】vue3-element-plus中日期时间选择器（范围）限制选择天数（30天为例）

最新推荐文章于 2024-07-24 14:36:02 发布

原创最新推荐文章于 2024-07-24 14:36:02 发布 · 6k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #elementui

前端框架同时被 2 个专栏收录

7 篇文章

订阅专栏

Vue3+TypeScript

6 篇文章

订阅专栏

本文介绍如何使用element-plus的el-date-picker组件实现限定日期选择范围的功能，通过@calendar-change监听选择变化，并利用disabledDate方法限制不可选日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element-plus的el-data-picker中没有了pick-options，但是新增了事件calendar-change（等同onPick），disable-date也有，同样可以实现

Element-plus文档

在这里插入图片描述

代码实现

组件

在这里插入图片描述

 <el-form-item v-if="conditionForm.filterType == 0" label="时间范围：" prop="rangeDate">
    <el-date-picker
       v-model="validateForm.rangeDate"
       type="datetimerange"
       range-separator="到"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
       format="YYYY/MM/DD HH:mm:ss"
       value-format="YYYY-MM-DD H:m:s"
       :default-time="defaultTime2"
       :disabled-date="disabledDate"
       @focus="handleFocus"
       @calendar-change="handleChange"
     />
</el-form-item>

方法

在这里插入图片描述

...
...
//变量
 const chooseDay = ref(null)
 const handleChange = (val: Date[]) => {
    const [pointDay] = val
    chooseDay.value = pointDay
}
//取值方法
const handleFocus = () => {
       chooseDay.value = null
}
const disabledDate = (time: number) => {
   if (!chooseDay.value) {
     return false
   }
   let timeRange = 30
   const con1 = new Date(chooseDay.value).getTime() - timeRange * 24 * 60 * 60 * 1000
   const con2 = new Date(chooseDay.value).getTime() + timeRange * 24 * 60 * 60 * 1000
   return time < con1 || time > con2
 }
 return {

        handleChange,
        handleFocus,
        disabledDate
}
...
...

效果实现

在这里插入图片描述