el-date-picker两个输入框实现日期范围选择

zyy_wx

已于 2023-12-13 15:04:32 修改

阅读量287

点赞数

文章标签： vue.js 前端 javascript

于 2023-12-13 15:02:01 首次发布

本文链接：https://blog.csdn.net/zyy_wx/article/details/134972388

版权

<el-form-item label='进场时间' prop='name'>
  <el-date-picker
    class='wid-restrict'
    value-format='yyyy-MM-dd'
    v-model='ruleForm.date1'
    :picker-options='startDate'
    :disabled='isDisbale'
    type='date'
    placeholder='选择日期'>
  </el-date-picker>
</el-form-item>
<el-form-item label='退场时间' prop='name'>
  <el-date-picker
    class='wid-restrict'
    value-format='yyyy-MM-dd'
    v-model='ruleForm.date2'
    :picker-options='endDate'
    :disabled='isDisbale'
    type='date'
    placeholder='选择日期'>
  </el-date-picker>
</el-form-item>

data(){
  return {
     isDisbale: false,
     startDate: this.beginDate(),
     endDate: this.processDate(),
     ruleForm: {
        date1: '',
        date2: ''
     },
  }
}

methods: {
     // 日期选择约束
    beginDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.ruleForm.date2) {
            //如果结束时间不为空，则小于结束时间
            return (
              new Date(self.ruleForm.date2).getTime() < time.getTime()
            )
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
    processDate() {
      const self = this
      return {
        disabledDate(time) {
          if (self.ruleForm.date1) {
            //如果开始时间不为空，则结束时间大于开始时间
            return (
              new Date(self.ruleForm.date1).getTime() > time.getTime()
            )
          } else {
            // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
          }
        }
      }
    },
}