elment2 写法:
<el-date-picker
unlink-panels
v-model="searchDate"
type="daterange"
align="left"
unlink-panels
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
设置时间(在vue组件中):
// 定义
data() {
return {
searchDate: []
}
}
// 设置时间
defaultDate() {
this.searchDate = [];
const startDate = util.getDateSubDays(7); // getDateSubDays在文章后面会给出
const endDate = util.getDateSubDays(0);
this.searchDate.push(startDate)
this.searchDate.push(endDate);
}
// 选择返回值处理(此处只为展示简单用法,就不按照格式写了)
if (this.searchDate && this.searchDate.length) {
param.startDate = this.searchDate[0]; // 2010-10-07
param.endDate = this.searchDate[1]; // 2010-10-14
}
elmentPlus 写法:
<el-date-picker
unlink-panels
v-model="searchDate"
type="daterange"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
设置时间与上面的elment2 一致
两者的DatePicker 区别(本文章重点):
-
elmentPlus DatePicker 增加了format的属性,根据官网注释:显示在输入框中的格式。
使用`format`指定输入框的格式。 使用`value-format`指定绑定值的格式。默认情况下,组件接受并返回`Date`对象。
如果不写format,则默认显示的格式: "YYYY-MM-DD"
-
elmentPlus 没有align属性。只能居中。如果DatePicker控件太靠近屏幕的左边,会因为这个特性导致时间选择器的弹窗靠右。如图所示:
解决办法:为了排版好看点,在控件左边加字,延长控件的长度,如图所示:
-
当 elmentPlus 的value-format="yyyy-MM-dd"时,控件显示的时间会出错,并且返回的也出错,如图所示:
因此 当使用的是elmentPlus DatePicker 时,value-format="YYYY-MM-DD"。
-
当 elment2 的value-format="YYYY-MM-DD"时 ,控件的时间会出错。
因此 当使用的是elment2 DatePicker 时,value-format="yyyy-MM-dd"。
某天的前几天js 怎么写 ---- getDateSubDays
util.getDateSubDays = function(number, startDate) {
const date = new Date();
// 如果未传入开始时间则使用当前时间
if (startDate) {
date.setTime(startDate.getTime() - number * 24 * 60 * 60 * 1000);
} else {
date.setTime(date.getTime() - number * 24 * 60 * 60 * 1000);
}
const year = date.getFullYear();
let month = date.getMonth() + 1;
if (month < 10) {
month = '0' + month;
}
let day = date.getDate();
if (day < 10) {
day = '0' + day;
}
return year + '-' + month + '-' + day;
};