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

目录

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

vue日期选择框之时间范围
实现效果如下
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 逻辑层
效果
vue日期选择框之时间范围的使用介绍
文章图片

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

【vue日期选择框之时间范围的使用介绍】以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

    推荐阅读