el-date-picker 限制选择六个月内的日期

效果如图:在这里插入图片描述

代码:

 <el-date-picker v-model="serchTimes" type="daterange" size="small" start-placeholder="开始时间"
                                range-separator="~" end-placeholder="结束时间" format="yyyy / MM / dd "
                                :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" @change="changeTime"
                                :default-time="['00:00:00', '23:59:59']"  :unlink-panels="true" :validate-event="false" :clearable="false">
                            </el-date-picker>

主要::picker-options=“pickerOptions” 中的配置:

onPick配置项中可以获取到点击时的时间,将其转换为时间戳后存储起来。

disabledDate配置项中配置只能选择前后6个月,这个配置项的参数是当前的日期,返回参数要求是Boolean值

其他属性解析:format="yyyy / MM / dd ": 选择后显示的样式

default-time 是因为需要默认的时分秒才添加的

value-format 是点击确认后,change事件中能获取到的数据格式,在这里插入图片描述
:unlink-panels=“true” 是取消两个面板之间的联动滚动

:validate-event=“false” 取消点击时的校验,按需写

:clearable=“false” 取消清除功能 ,按需写

data(){
    return{
        serchTimes: '',
        selectData: '',
        pickerOptions: {
                onPick: ({ maxDate, minDate }) => {
                    this.selectData = maxDate ? maxDate.getTime() : minDate ? minDate.getTime() : ''
                     if (!maxDate || !minDate) {
                        this.serchTimes = ''  //只选一个的时候,日期置空
                    }
                },
                },
                disabledDate: (time) => {
                    if (this.selectData) {
                        const curDate = this.selectData;
                        const three = 183 * 24 * 3600 * 1000;// 6个月
                        const threeMonthsAfter = curDate + three; // 开始时间+6个月
                        const threeMonthsBefore = curDate - three; //开始时间-6个月
                        return time.getTime() > threeMonthsAfter || time.getTime() < threeMonthsBefore;
                    }
                }
        },
    }
},
methods:{
    //选择时间后的处理函数了,可以把数据保存后发送接口等等操作
     changeTime() {
            if (this.serchTimes) {
                this.reloadForm.begAbsTime = this.serchTimes[0]
                this.reloadForm.endAbsTime = this.serchTimes[1]
            }
        },
}

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-12 23:46:01       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-12 23:46:01       71 阅读
  3. 在Django里面运行非项目文件

    2024-07-12 23:46:01       58 阅读
  4. Python语言-面向对象

    2024-07-12 23:46:01       69 阅读

热门阅读

  1. React组件间通信的几种方式

    2024-07-12 23:46:01       18 阅读
  2. TCP/IP模型和OSI模型的区别(面试题)

    2024-07-12 23:46:01       20 阅读
  3. opencv--把cv::Mat数据转为二进制数据的保存和读取

    2024-07-12 23:46:01       19 阅读
  4. 扫地机器人如何进行MTBF测试

    2024-07-12 23:46:01       18 阅读
  5. ffmpeg和imagemagick制作gif动图

    2024-07-12 23:46:01       22 阅读
  6. 基于深度学习的PID

    2024-07-12 23:46:01       20 阅读
  7. 【C++】C++中struct结构体和class类的区别

    2024-07-12 23:46:01       16 阅读
  8. CAS详解

    CAS详解

    2024-07-12 23:46:01      16 阅读
  9. Go语言详细教程

    2024-07-12 23:46:01       19 阅读