[JavaScript知识库]element-ui的el-date-picker组件（限制时间范围选择、常用快捷）

<el-date-picker
	size="medium"
	v-model="export_from.time_range"
	type="daterange"
	value-format="timestamp"
	range-separator="至"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	:picker-options="instantPickerOptions"
></el-date-picker>
	
export default {
	data() {
		return {
			instantPickerOptions: {
				//限制只能选一年范围
                onPick: (obj) => {
                    this.pickerMinDate = new Date(obj.minDate).getTime();
                    console.log(obj)
                },
				disabledDate : time => {
                    if (this.pickerMinDate) {
                        const day1 =  366 * 24 * 3600 * 1000
                        let maxTime = this.pickerMinDate + day1
                        let minTime = this.pickerMinDate - day1
                        return time.getTime() > maxTime || time.getTime()<minTime
                    }
                    else{
                    	//不能选今天之后的日期
                        return time.getTime() > Date.now()-1 * 24 * 3600 * 1000
                    }
                    
				}
				//常用快捷
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
						const now = new Date(new Date().toLocaleDateString());
						const start = now.getTime();
						picker.$emit('pick', [start, start]);
						}
					},
					{
						text: '昨天',
						onClick(picker) {
						const now = new Date(new Date().toLocaleDateString());
						const start = now.getTime() - 60 * 60 * 24 * 1000;
						picker.$emit('pick', [start, start]);
						}
					},
					{
						text: '本周',
						onClick(picker) {
						const now = new Date(new Date().toLocaleDateString());
						const start = now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000;
						const end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
						picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '上周',
						onClick(picker) {
						const now = new Date(new Date().toLocaleDateString());
						const start = now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000;
						const end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
						picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '本月',
						onClick(picker) {
						const now = new Date();
						const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
						const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
						picker.$emit('pick', [startDate.getTime(), endDate.getTime()]);
						}
					},
					{
						text: '上月',
						onClick(picker) {
						const now = new Date();
						const startDate = new Date(now.getFullYear() - (now.getMonth() > 0 ? 0 : 1), (now.getMonth() + 11) % 12, 1);
						const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
						picker.$emit('pick', [startDate.getTime(), endDate.getTime()]);
						}
					}
				],
			}
		}	
	}
}