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
    }