Vue3 elementUI如何修改el-date-picker默认时间
作者:成都彭于晏的橙子
这篇文章主要介绍了Vue3 elementUI如何修改el-date-picker默认时间,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
elementUI修改el-date-picker默认时间
HTML:
<el-date-picker v-model="dateValue" type="daterange" size="small" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts"> </el-date-picker>
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
<el-form-item label="时间周期:" prop="timeCycle" > <el-date-picker v-model="createForm.timeCycle" type="datetimerange" :picker-options="pickerOptions" //快捷时间选择的函数 range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" //默认值为这种格式 > </el-date-picker> </el-form-item>
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 } }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- Vue3+ElementPlus el-date-picker设置可选时间范围的示例代码
- elementUI组件中el-date-picker限制时间范围精确到小时的方法
- element组件el-date-picker禁用当前时分秒之前的日期时间选择
- 简单设置el-date-picker的默认当前时间问题
- element ui时间日期选择器el-date-picker报错Prop being mutated:"placement"解决方式
- vue el-date-picker动态限制时间范围案例详解
- vue element-ui el-date-picker限制选择时间为当天之前的代码
- el-date-picker时间清空值为null处理方案