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控件太靠近屏幕的左边,会因为这个特性导致时间选择器的弹窗靠右。如图所示:

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

解决办法:为了排版好看点,在控件左边加字,延长控件的长度,如图所示:

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

 

  • elmentPlus 的value-format="yyyy-MM-dd"时,控件显示的时间会出错,并且返回的也出错,如图所示:

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

  因此 当使用的是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;
};
上一篇:UI⑥Control族控件DatePicker


下一篇:解决viewUI中 DatePicker控件获取的日期总是少一天的问题