vue日期选择框之时间范围的使用介绍 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,//时间相关函数 startonDateChange: 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 time.getTime()); }},},};

script 逻辑层
效果