标签：DatePicker startDate element2 format 控件 searchDate date 选择器

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。