element2 与 elementPlus DatePicker 日期选择器 的区别

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;
};

标签：DatePicker,startDate,element2,format,控件,searchDate,date,选择器
来源： https://blog.csdn.net/weixin_43991241/article/details/120828009