need:
As soon as you enter the page, the date from the 1st of the month to the current day will be displayed
(and quick selection of the last week and the last month)
Effect:
Ideas/steps:
1. Use element's DatePicker date picker
<template>
<div>
<el-date-picker
v-model="value2"
type="daterange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>2. Declare an array value2:[ ], and bind it with DatePicker v-model="value2"
data () {
return {
value2:[],
}
},3. In the methods, write the event, get the start time and end time
methods: {
getInitializeDate () {
let date = new Date()//获取新的时间
//获取当前年份,并且转为字符串
let year = date.getFullYear().toString()
//获取当前月份，因为月份是要从0开始，此处要加1，
//使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0'
let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
//获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0'
let day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
//字符串拼接，将开始时间和结束时间进行拼接
let start = year + '-' + month + '-01' //当月第一天
let end = year + '-' + month + '-' + day //当天
this.value2 = [start, end] //将值设置给组件DatePicker 绑定的数据
},
}Supplementary little knowledge:
let myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间
4. Call this method in the created lifecycle:
created() {
this.getInitializeDate();//获取当月默认日期（当月1号到当天）
}5. Quickly set [the last week] and [the last month]
data () {
return {
value2:[],
pickerOptions: {
shortcuts: [{
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: '最近一个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}]
},
}
},
