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

目录

• vue日期选择框之时间范围
• 实现效果如下
• vue日期控件解析
• 以上template视图层
• script 逻辑层

vue日期选择框之时间范围

实现效果如下

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
    }

vue日期控件解析

      
        
          
            
          
        
        -
        
          
            
          
        
       

以上template视图层

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

script 逻辑层

效果

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。