快捷導(dǎo)航

vue日期選擇框之時間范圍的使用介紹

更新時間：2022年05月31日 11:03:29 作者：itfallrain

這篇文章主要介紹了vue日期選擇框之時間范圍的使用，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue日期選擇框之時間范圍

實現(xiàn)效果如下

在這里插入圖片描述

 <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="['開始時間', '結(jié)束時間']"
                @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,
      //時間相關(guān)函數(shù) 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),
        };
      },
    //時間相關(guān)函數(shù) end
    }

vue日期控件解析

      <el-form-item label="有效期限" >
        <el-col :span="6">
          <el-form-item>
            <el-date-picker
              type="date"
              placeholder="選擇日期"
              value-format="yyyy-MM-dd 00:00:00"
              v-model="effectiveStartTime"
                :picker-options="pickerOptionsStart"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="6">
          <el-form-item>
            <el-date-picker
              placeholder="選擇日期"
              value-format="yyyy-MM-dd 00:00:00"
              v-model="effectiveEntTime"
                :picker-options="pickerOptionsEnd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

以上template視圖層

    return {
      effectiveEntTime: "",
      effectiveEntTime: "",
      pickerOptionsStart: {
        //開始有效期
        disabledDate: (time) => {
          if (this.effectiveEntTime) {
            return time.getTime() > new Date(this.effectiveEntTime).getTime();
          }
        },
      },
      pickerOptionsEnd: {
        //結(jié)束有效期
        disabledDate: (time) => {
          if (this.effectiveStartTime) {
            return (
              time.getTime() - 3600 * 1000 * 24 <
                new Date(this.effectiveStartTime).getTime() - 86400000 ||
              Date.now() - 3600 * 1000 * 24 > time.getTime()
            );
          }
        },
      },
    };