antd限制时间选择区间年月日时

努力搬砖的小码

已于 2023-08-14 14:06:10 修改

阅读量314

点赞数 1

文章标签： javascript 前端 html

于 2023-08-14 14:05:59 首次发布

本文链接：https://blog.csdn.net/weixin_63199745/article/details/132274500

版权

1、html

     <div>
          <span>开始日期：</span>
          <a-date-picker
            v-model="startDate"
            :show-time="{ format: 'HH'}"
            format="YYYY-MM-DD HH"
            @change="onChangeStart"
            :disabled-date="disabledDateStart"
            :disabled-time="disabledTimeStart"/>
          <span style="margin-left:20px">结束日期：</span>
          <a-date-picker
            v-model="endDate"
            :show-time="{ format: 'HH'}"
            format="YYYY-MM-DD HH"
            @change="onChangeEnd"
            :disabled-date="disabledDateEnd"
            :disabled-time="disabledTimeEnd"/>
          <a-button class="editable-list-btn" type="primary" @click="search">{{ btnText }}</a-button>
        </div>

2、重点 js 限制年月日时

在script的data里

 // 开始时间
      startDate: undefined,
      // 结束时间
      endDate: undefined,
      start: '',
      end: '',
      // 用来记录选择的开始时间
      timeStart: '',
      // 用来记录选择的结束时间
      timeEnd: '',
      // 开始的小时
      starthour: '',
      // 结束的小时
      endhour: '',

在script的methods里

   // 选择开始日期
    onChangeStart (e) {
      this.starthour = e.hour()
      this.timeStart = e
      this.startDate = moment(moment(e).format('YYYY-MM-DD HH'))
      this.start = moment(e).format('YYYY-MM-DD HH')
    },
    // 开始时间区间
    disabledDateStart (current) {
      if (this.timeEnd === '') {
        return current >= moment().endOf('day')
      }
      if (this.timeEnd !== '') {
        return current >= this.timeEnd.endOf('day') || current >= moment().endOf('day')
      }
      // return current <= this.timeEnd.endOf('day') || current <= this.timeEnd.add(-1, 'months')
    },
    // 开始日期限制小时
    disabledTimeStart (dateTime) {
      return {
        disabledHours: () => {
          if (this.timeEnd !== '') {
            if (this.timeEnd.isSame(dateTime, 'days')) {
              const hours = []
              for (var i = this.endhour; i < 24; i++) {
                hours.push(i)
              }
              return hours
            }
          }
          return []
        }
      }
    },
    // 结束日期限制小时
    disabledTimeEnd (date) {
      return {
        disabledHours: () => {
          if (this.timeStart !== '') {
            if (this.timeStart.isSame(date, 'days')) {
              // eslint-disable-next-line no-undef
              return _.times(this.starthour + 1)
            }
          }
          return []
        }
      }
    },
    // 选择结束时间
    onChangeEnd (e) {
      this.endhour = e.hour()
      this.timeEnd = e
      this.endDate = moment(moment(e).format('YYYY-MM-DD HH'))
      this.end = moment(e).format('YYYY-MM-DD HH')
    },
    // 结束时间区间
    disabledDateEnd (current) {
      if (this.timeStart === '') {
        // eslint-disable-next-line no-useless-return
        return current >= moment().endOf('day')
      }
      if (this.timeStart !== '') {
        return current <= this.timeStart.startOf('day') || current >= moment().endOf('day')
      }
    },