element UI 带有月份范围的日期选择器不能选择起始月份

凉凉凉凉凉介°

已于 2022-07-11 15:24:56 修改

阅读量652

点赞数

文章标签： vue.js elementui javascript

于 2022-07-11 15:20:17 首次发布

本文链接：https://blog.csdn.net/qq_41695543/article/details/125721157

版权

博客讲述了在前端开发中遇到的一个日期选择器（el-date-picker）无法正确限制选择范围的问题。作者发现当日期格式不精确到时分秒时，起始月份无法被选中。通过将日期格式改为'YYYY-MM-DDHH:mm:ss'，成功解决了这个问题，使得日期选择器能按照指定的起始和结束日期范围正常工作。

摘要由CSDN通过智能技术生成

需求：根据接口获取到的起始日期和结束日期来控制日期选择器的选择范围。代码如下

<el-date-picker
  v-model="queryParam.data.objectDate"
  :picker-options="pickerOptions"
  type="monthrange"
  range-separator="-"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  value-format="yyyy-MM-dd">
</el-date-picker>

pickerOptions: this.dealDisabledDate()

dealDisabledDate(){
  return {
    onPick(time) {
      // console.log(time,'ee')
    },
    disabledDate(time) {
      return (
        time.getTime() < new Date('2022-02-01').getTime()
        || time.getTime() > new Date('2022-07-31').getTime()
      )
    }
  }
},

如上图所示，日期格式为 YYYY-MM-DD ，这样是选择不了起始月份的。接下来我修改了数据格式，改完之后就可以选择到了。

dealDisabledDate(){
  return {
    onPick(time) {
      // console.log(time,'ee')
    },
    disabledDate(time) {
      return (
        time.getTime() < new Date('2022-02-01 00:00:00').getTime()
        || time.getTime() > new Date('2022-07-31 00:00:00').getTime()
      )
    }
  }
},