vue日期选择框之时间范围的使用

实现效果如下

 <a-col :xl="8" :lg="16" :md="24" :sm="32">
            <a-form-item label="时间" >
              <a-range-picker
                style="width: 350px"
                v-model="queryParam.createTimeRange"
                :disabled-time="disabledRangeTime"
                :show-time="{
                  hideDisabledOptions: true,
                  defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')],
                }"
                format="YYYY-MM-DD HH:mm:ss"
                :placeholder="['开始时间', '结束时间']"
                @change="onDateChange"
                @ok="onDateOk"
              />
            </a-form-item>
          </a-col>

1：引入格式化工具

import moment from 'moment'

2：给默认值

  queryParam:{
            createTimeRange:[
            moment(new Date(new Date(new Date().toLocaleDateString()).getTime()),'YYYY-MM-DD HH:mm:ss'),
            moment(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1),'YYYY-MM-DD HH:mm:ss')
          ]
        },

3：methods书写的方法

 methods: {
      moment,
      //时间相关函数 start
      onDateChange: function (value, dateString) {
        console.log(dateString[0],dateString[1]);
        this.queryParam.startTime=dateString[0];
        this.queryParam.endTime=dateString[1];
      },
      onDateOk(value) {
        console.log(value);
      },
      range(start, end) {
        const result = [];
        for (let i = start; i < end; i++) {
          result.push(i);
        }
        return result;
      },
      disabledRangeTime(_, type) {
        if (type === 'start') {
          return {
            disabledHours: () => this.range(0, 60).splice(60, 60),
            disabledMinutes: () => this.range(0, 60).splice(60, 60),
            disabledSeconds: () => this.range(0, 60).splice(60, 60),
          };
        }
        return {
          disabledHours: () => this.range(0, 60).splice(60, 60),
          disabledMinutes: () => this.range(0, 60).splice(60, 60),
          disabledSeconds: () => this.range(0, 60).splice(60, 60),
        };
      },
    //时间相关函数 end
    }