vue+element-ui时间选择器部分

增加多个快捷选择时间部分 -今天、昨天、本周、上周、本月、上月、最近七天、最近15天、最近30天、最近三个月、今年

<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>



data() {

return {

pickerOptions: {

shortcuts: [

{

text:'今天',

onClick(picker) {

const end =new Date();

const start =new Date();

picker.$emit('pick', [start,end]);

}

},

{

text:'昨天',

onClick(picker) {

const end =new Date();

const start =new Date();

end.setTime(end.getTime() -3600 *1000 *24);

start.setTime(start.getTime() -3600 *1000 *24);

picker.$emit('pick', [start,end]);

}

},

{

text:'本周',

onClick(picker) {

const date =new Date();

const weekday =date.getDay()||7;

const end =new Date();

const start =date.setDate(date.getDate()-weekday+1);

picker.$emit('pick', [start,end]);

}

},

{

text:'上周',

onClick(picker) {

var now =new Date();//当前日期

                var nowDayOfWeek =now.getDay();//今天本周的第几天

                var nowDay =now.getDate();//当前日

                var nowMonth =now.getMonth();//当前月

                var nowYear =now.getYear();//当前年

                nowYear += (nowYear <2000) ?1900 :0;//

                var start =new Date(nowYear,nowMonth,nowDay -nowDayOfWeek -6);

const end =new Date(nowYear,nowMonth,nowDay -nowDayOfWeek);

picker.$emit('pick', [start,end]);

}

},

{

text:'本月',

onClick(picker) {

const end =new Date();

end.setTime(end.getTime() -3600 *1000 *24);

const start =new Date(new Date().getFullYear(),new Date().getMonth(),1);

picker.$emit('pick', [start,end]);

}

},

{

text:'上月',

onClick(picker) {

var now =new Date();//当前日期

                var nowYear =now.getYear();//当前年

                nowYear += (nowYear <2000) ?1900 :0;//

                var lastMonthDate =new Date();//上月日期

                lastMonthDate.setDate(1);

lastMonthDate.setMonth(lastMonthDate.getMonth() -1);

var lastMonth =lastMonthDate.getMonth();

//获得某月天数

                var monthStartDate =new Date(nowYear,lastMonth,1);

var monthEndDate =new Date(nowYear,lastMonth +1,1);

var days = (monthEndDate -monthStartDate) / (1000 *60 *60 *24);

//---------------------------------------

                const start =new Date(nowYear,lastMonth,1);

const end =new Date(nowYear,lastMonth,days);

picker.$emit('pick', [start,end]);

}

},

{

text:'最近七天',

onClick(picker) {

const end =new Date();

const start =new Date();

start.setTime(start.getTime() -3600 *1000 *24 *7);

picker.$emit('pick', [start,end]);

}

},

{

text:'最近15天',

onClick(picker) {

const end =new Date();

const start =new Date();

start.setTime(start.getTime() -3600 *1000 *24 *15);

picker.$emit('pick', [start,end]);

}

},

{

text:'最近30天',

onClick(picker) {

const end =new Date();

const start =new Date();

start.setTime(start.getTime() -3600 *1000 *24 *30);

picker.$emit('pick', [start,end]);

}

},

{

text:'最近三个月',

onClick(picker) {

const end =new Date();

const start =new Date();

start.setTime(start.getTime() -3600 *1000 *24 *90);

picker.$emit('pick', [start,end]);

}

},

{

text:'今年',

onClick(picker) {

const end =new Date();

const start =new Date(new Date().getFullYear(),0);

picker.$emit('pick', [start,end]);

}

}

]

},

}

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容