这篇文章主要介绍“Vue3 elementUI怎么修改el-date-picker默认时间”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue3 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];
},需要一进页面时，把日期选择器，默认展示为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 elementUI怎么修改el-date-picker默认时间”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
