element-UI时间控件:日期时间的选择范围的控制方法

时间:2022-07-05 18:08:49

例:如一段已知的时间范围,为2018-10-01 - 2019-01-01 ;
当前为2018-07-09日,则今天以前的时间不能选择,以及2019-01-01以后的时间不能选;实现如下;

<el-form-item label="时间选择" prop="addTime">
 <el-date-picker
    :editable="false"
      unlink-panels
    v-model="form.addTime"
  type="daterange"
  value-format="yyyy-MM-dd"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  :picker-options="pickerOptions"
  :default-value="defaultValue">
   </el-date-picker>
</el-form-item>

export default {
  data() {
  let tool = this.tool
  let _this = this
  return {
  form:{
    time:[], //为时间范围段
    addTime:[], //为最终选择的时间,组件绑定的时间
  },
  formRules:{
    addTime:[{ required: true,message: '时间不能为空!', trigger: 'blur' }],
  },
pickerOptions: {
  disabledDate (time) {
    let t = _this.tool.date.format(new Date(), "yyyy-MM-dd")
    t= t+' 00:00:00'
    let myDate = new Date(_this.form.time[0])
    let year = myDate.getFullYear()
    let month = myDate.getMonth()
    let date = myDate.getDate()
    if(_this.form.time[1]){
      if(new Date(year, month, date).getTime() < new Date(t).getTime()){
        return time.getTime() > new Date(_this.form.time[1]).getTime() || time.getTime() < new Date(t).getTime()
      }
      return time.getTime() > new Date(_this.form.time[1]).getTime() || time.getTime() < new Date(year, month, date).getTime()
    }else {
      if(new Date(year, month, date).getTime() < new Date(t).getTime()){
        return time.getTime() < new Date(t).getTime()
      }
      return time.getTime() < new Date(year, month, date).getTime()
    }
  }
},
  defaultValue:tool.date.format(new Date(),'yyyy-MM-dd'),
  }
 }
}