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

朴灿烈づ我的快乐病毒、 2022-10-30 13:23 352阅读 0赞

> 实现效果如下

![在这里插入图片描述][20210219173503791.png_pic_center]

<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
        }

[20210219173503791.png_pic_center]: /images/20221024/7ae99cf14db0430693431246e6044f83.png