限制一年和一年之前
因为业务要求,是按照月份导历史,所以我的查询条件是从 2020-05-18一直追到2019年五月一号,效果图如下
<template>
<!--vue 时间选择控件测试-->
<div class="hello">
<div>
选中的日期:{
{
startDate}}到{
{
endDate}}
</div>
<div>
时间范围:
<el-radio
v-model="historyFlag"
@change="changeHistory"
label="D"
>
近一年</el-radio
>
<el-radio
v-model="historyFlag"
@change="changeHistory"
label="H"
>
历史</el-radio
>
</div>
<div
>
<div >
操作时间:<el-date-picker
v-model="dataPickerData.datePickerSpace"
type="daterange"
unlink-panels
:default-value="dataPickerData.limitDatePickerSpace"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="
开始日期
"
end-placeholder="结束日期"
:picker-options="
historyFlag === 'D'
? dataPickerData.limitCurrentTime
: dataPickerData.limitHistoryTime
"
>
</el-date-picker>
</div>
</div>
</div>
</template>
<script>
import formatUtil from "./formatUtil";
export default {
name: 'DatePickerDemo',
data () {
return {
startDate: "",
endDate: "",
// 历史选择变量
historyFlag: "D",
// 为了区分点击时候没有查询就导出,导致导出历史记录混乱的三方变量
isSearchHistory: "D",
dataPickerData: {
// 日期时间选择数组【开始时间,结束时间】
datePickerSpace: null,
// 日期选择数组空间可选范围控制
limitDatePickerSpace: null,
limitCurrentTime: {
/**
* 限制选择近1年的日期(去年的本月1日到今天)
* @param time
* @returns {boolean}
*/
disabledDate: function(time) {
// 不能超过当前时间
if (new Date(time).getTime() > new Date().getTime()) {
return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
} else {
// 因为项目要求是查找2019-04-01 到 2020-04-25(2020四月的一天)
// 需要找出现在 2020-04-25 到 2019-04-01有多少天
// 1.判断年,平年还是闰年
let y = new Date().getFullYear() - 1;
// 用年份除以4,如果没有余数就是闰年,如果有余数就是平年。
let isLeap = (0 === y % 4 && 0 === y % 100) || 0 === y % 400;
// 平年的2月是28天,闰年是的2月是29天 因此闰年比平年多一天
// 2019 是 365天
let days = isLeap ? 366 : 365;