首先

时间可以选择至年月日以及时分秒,使用valueFormat

       <a-date-picker
        valueFormat="YYYY-MM-DD HH:mm:ss"
        style="width: 100%"
        v-model="model.beginTime"
        placeholder="请选择开始时间"
        @ok="chooseBeginTime"
       ></a-date-picker>

 1.限制只能选择从当天开始的日期,使用disabled-date

       <a-date-picker
        valueFormat="YYYY-MM-DD HH:mm:ss"
        style="width: 100%"
        v-model="model.beginTime"
        placeholder="请选择开始时间"
        @ok="chooseBeginTime"
        :disabled-date="disabledDate" 
       ></a-date-picker>
    disabledDate(cur) {
        //获取当前时间
      const now = moment().format('YYYY-MM-DD') + ' 00:00:00'
      let dateT = moment(now).valueOf()
        //置灰日期小于当前时间
      return cur < dateT
    }

2.限制只能选择从当前开始的时间,使用disabled-time,要搭配show-time一起使用,选择时可直接定位到可选时间位置

       <a-date-picker
        valueFormat="YYYY-MM-DD HH:mm:ss"
        style="width: 100%"
        v-model="model.beginTime"
        placeholder="请选择开始时间"
        @ok="chooseBeginTime"
        :disabled-date="disabledDate"
        show-time
        :disabled-time="disabledDateTime"
       ></a-date-picker>
    range(start, end) {
      const result = []
      for (let i = start; i < end; i++) {
        result.push(i)
      }
      return result
    },
    disabledDateTime(e) {
      let day
      const now = moment()
      if (!e) {
        day = now
      } else {
        day = e
      }
      //当前选中的时间
      const [year, month, date, hour, minute, second] = [
        day.year(),
        day.month() + 1,
        day.date(),
        day.hour(),
        day.minute(),
        day.second(),
      ]
      //判断选中时间与现在时间
      let disabledHours = []
      let disabledMinutes = []
      let disabledSeconds = []
      if (year == now.year() && month == now.month() + 1 && date == now.date()) {
        disabledHours = this.range(0, 24).splice(0, now.hour())
        if (hour == now.hour()) {
          disabledMinutes = this.range(0, 60).splice(0, now.minute())
          if (minute == now.minute()) {
            disabledSeconds = this.range(0, 60).splice(0, now.second())
          }
        }
      }
      return {
        disabledHours: () => disabledHours,
        disabledMinutes: () => disabledMinutes,
        disabledSeconds: () => disabledSeconds,
      }
    },

其次

结束时间选择与开始时间可为同一天

   :disabled-date="disabledEndDate"
disabledEndDate(current) {
  if (!this.model.beginTime) {
    return true
  } else {
    return current < moment(this.model.beginTime.split(' ')[0]).add(0, 'days')
  }
}

结束时间选择是开始时间的第二天

disabledEndDate(current) {
  if (!this.model.beginTime) {
    return true
  } else {
                                                          //修改这里
    return current < moment(this.model.beginTime.split(' ')[0]).add(1, 'days')
  }
}
Logo

前往低代码交流专区

更多推荐