element组件库的日期选择器如何限制?

本次项目中涉及到根据日期查找出来的数据进行调整,所以修改的数据必须是查找范围内的数据.需要对调整数据的日期进行限制,效果如下:

首先我们使用了element 组件库的日期选择器,其中灌完介绍, picker-options中函数disabledDate可以设置禁用状态,代码如下:

复制代码
             <el-date-picker
                  v-model="formData.dates"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                >
                </el-date-picker>

        data(){
            return {
             pickerOptions: {
                disabledDate: this.doLimitDate  //调用方法
                  }
                }
            }

因为这里根据节假日进行查找,所以能调整的数据也只有国庆节期间的.

方便操作, 后端同事返回了起始时间的数据 , 所以我只需要对日期处理进行限制即可, 在这里的思路是讲起始时间段转为时间戳 , 进行判断即可,在这里有个小问题, 为什么需要格式化日期,是因为后端返回的是字符串,字符串试用getTime()转时间戳是不行的哦.所以这里处理了一下,代码如下:

复制代码
 methods: {
    doLimitDate() {
        //这里new Date()是格式化日期的方法,this.startEndDate是起始时间段
      let start = new Date(this.startEndDate[0]).getTime() 
      let end = new Date(this.startEndDate[1]).getTime()
      this.pickerOptions.disabledDate = (time) => {
        return time.getTime() < start || time.getTime() > end
      }
    }
}

所以,只需要把限制的时间范围进行时间戳转换即可了, 快去操作一下试试吧 !

相关推荐
Liudef06几秒前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪3 分钟前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
z_mazin1 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan2 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君3 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss
揣晓丹3 小时前
JAVA实战开源项目:校园失物招领系统(Vue+SpringBoot) 附源码
java·开发语言·vue.js·spring boot·开源
吃没吃3 小时前
vue2.6-源码学习-Vue 核心入口文件分析
前端
Carlos_sam3 小时前
Openlayers:海量图形渲染之图片渲染
前端·javascript
XH2763 小时前
Android Retrofit用法详解
前端
鸭梨大大大3 小时前
Spring Web MVC入门
前端·spring·mvc