您现在的位置是:网站首页> 编程资料编程资料

Vue3 elementUI如何修改el-date-picker默认时间_vue.js_

2023-05-24 1162人已围观

简介 Vue3 elementUI如何修改el-date-picker默认时间_vue.js_

elementUI修改el-date-picker默认时间

 HTML:

JS:

//放在页面的state中 shortcuts: [         {           text: "本周",           value: () => {             const end = new Date();             const start = new Date();             //周日算第一天,如果周日查询本周的话,天数是0,所有如果是0,默认设置为7,处理当前周             const nows = start.getDay() || 7;              start.setTime(start.getTime() - 3600 * 1000 * 24 * (nows - 1));             end.setTime(end.getTime() - 3600 * 1000 * 24 * (nows - 7));             console.log(start, end, "end");             return [start, end];           },         },         {           text: "本月",           value: () => methods.getTime(),         },         {           text: "上月",           value: () => {             const oDate = new Date();             let year = oDate.getFullYear();             let month = oDate.getMonth();             let start, end;             if (month == 0) {               year--;               start = new Date(year, 11, 1);               end = new Date(year, 11, 31);             } else {               start = new Date(year, month - 1, 1);               end = new Date(year, month, 0);             }             return [start, end];           },         },       ],

处理本月的函数:

      // 获取本月时间段datePicker使用       getTime() {         const oDate = new Date();         let year = oDate.getFullYear();         let month = 0//oDate.getMonth();         let start, end;         if (month == 0) {           year--;           start = new Date(year, 0, 1);           end = new Date(year, 12, 31);         } else {           start = new Date(year, month, 1);           end = new Date(year, month + 1, 0);         }         state.dateValue = [start, end];         return [start, end];       },

el-date-picker设置默认时间区间

需求

需要一进页面时,把日期选择器,默认展示为2012-01-01至当前日期-1天

即图:

代码和注释如下

2.1

2.2

由于开始时间是固定的,所以需要在定义数据时定义好,结束时间不能不填,也不能是" ",也不能是不符合时间格式的,否则整个时间选择器都不会展示了

 data(){ return { createForm: { timeCycle:["2012-01-01","2012-01-01"] } } } 

2.3

在页面一加载时,在created函数里把结束时间算好,然后赋值到定义的timeCycle数组的第二项

created(){ const end = new Date();//获取当前的日期 end.setTime(end.getTime() - 3600 * 1000 * 24 ) //计算,将当期日期-1天 //此时得到的是中国标准时间,格式不是yyyy-MM-dd,需要用dateFormat这个函数转换下 this.createForm.timeCycle[1]=this.dateFormat(end) //将转换完的正确格式的结束时间赋值到timeCycle数组的第二项 } 

2.4

时间格式的转换函数

中国标准时间,即,例如:Wed Oct 24 2018 20:00:00 GMT+0800

转换为:yyyy-MM-dd格式,即:2018-10-24

 methods:{ dateFormat(dateData) { var date = new Date(dateData) var y = date.getFullYear() var m = date.getMonth() + 1 m = m < 10 ? ('0' + m) : m var d = date.getDate() d = d < 10 ? ('0' + d) : d const time = y + '-' + m + '-' + d return time } } 

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

-六神源码网