element-ui 日期控制在

人间致远

于 2023-06-12 10:49:30 发布

阅读量152

点赞数

文章标签： javascript elementui html5

本文链接：https://blog.youkuaiyun.com/zengdaoqiang/article/details/131164237

版权

该文章展示了如何在Vue.js中使用el-date-picker组件来创建一个日期范围选择器，限制用户只能选择当前日期到前一个月的日期。通过设置pickerOptions和disabledDate属性，确保所选日期在一个月的时间范围内。

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

 <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
  </el-date-picker>

 日期时间范围控制一个月以内
data(){
  return {
   // 日期时间范围
   selectDate : '',
   pickerOptions: {
      onPick: ({maxDate, minDate}) => {
        this.selectDate = minDate.getTime();
        if (maxDate) {
          this.selectDate = ''
        }
      },
      disabledDate: (time) => {
        if (this.selectDate !== '') {
          const one = 30 * 24 * 3600 * 1000;
          const minTime = this.selectDate - one;
          const maxTime = this.selectDate + one;
          return time.getTime() < minTime || time.getTime() > maxTime
        }
      }
    },
}
}

日期时间范围（当前时间到之前一个月）
data(){
  return {
    pickerOptions: {
      disabledDate: time => {
        const day = 30 * 24 * 3600 * 1000 // 31536000000
        // 返回小于当前日期并两个月内的日期
        return time.getTime() > Date.now() || time.getTime() < (Date.now() - 8.64e7) - day
      }
    },
  }
}