Ant Design Vue日期选择器,禁止选择当前之前的时间

a-date-picker时间选择器

Ant Desugn Vue的时间选择器,也遇到了一些问题,就想记录一下,自认为水平不是很高,欢迎批评指正

//标签
<a-date-picker
      :showToday="false"
      :allowClear="false"
      @change="setTime"
      @openChange="openChange"
      :value="Survey.endTime"
      format="YYYY-MM-DD HH:mm:ss"
      :disabledDate="disabledDate"
      :disabledTime="disabledDateTime"
      :showTime="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
    />
data() {
    return {
      Survey: {},//存放截止时间
      disabledTime: {
        hour: '',//存放被ban掉的时
        minute: ''//存放被ban掉的分
      }
    }
  },
methods: {
    OpenModel(record) {
      this.Survey = { ...record, endTime: moment(record.endTime) }//上从别的地方传过来的默认值
    },
    setTime(data, datastring) {
      //若有清除按钮需要加入判断
      this.resEndtimeDis()
      this.Survey = { ...this.Survey, endTime: data }
      let time = data.format('YYYY/MM/DD HH mm').split(' ')//切割存放的年月日,时,分      
      var date = new Date()//获取当前时间
      if (moment(time[0]).valueOf() == moment(date.toLocaleDateString()).valueOf()) {
        //年月日相同增加限制条件
        this.disabledTime.hour = date.getHours()//ban掉 时
        if (date.getHours() < time[1]) {
          //判断选择的是否与当前时间是同一小时,如果不是则不限制分钟
          this.disabledTime.minute = ''//解除分的禁止
        } else {
          this.disabledTime.minute = date.getMinutes()//ban掉 分
        }
      } else {
        //日期不同解除所有限制条件
        this.resEndtimeDis()
      }
    },
    openChange(status) {
        if(status){
            this.setTime(this.Survey.endTime,'')
        }
        //上保险,当选择到了不可选择的时间将会默认选中当日0点
      if (new Date(this.Survey.endTime) <= new Date()) {
        this.Survey.endTime = moment(
          new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1)
        )
      }
    },
    range(start, end) {
      const result = []
      for (let i = start; i < end; i++) {
        result.push(i)
      }
      return result
    },
    disabledDate(current) {
      return current < moment().subtract(0, 'day')//今天之前的年月日不可选,不包括今天
    },
    disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(0, this.disabledTime.hour),//ban小时
        disabledMinutes: () => this.range(0, this.disabledTime.minute)//ban分
      }
    },
    resEndtimeDis() {//解除限制
      this.disabledTime = {
        hour: '',
        minute: ''
      }
    }
  }

你可能感兴趣的:(Ant Design Vue日期选择器,禁止选择当前之前的时间)