datepicker 限制只能选择7天的两种方式

 

---

前言

datepicker限制日期只能选择7天又两种方式。
一：限制控件的其实是否可用，只能限制当前日期前7天或后7天
二：限制所选天数小于7天，多出提示

---

 

一、限制控件是否可用，可选日期为当前日期的前7天或后7天？

1.控件

代码如下（示例）：

利用属性:picker-options="pickerDisabled"

<el-date-picker v-model="queryData.loginTime" value-format="yyyyMMddHHmmss" type="datetimerange" :clearable="false"
:picker-options="pickerDisabled" :default-time="['00:00:00', '23:59:59']"
start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>

2.实现代码

这里是前7天，后7天改变结束日期的值

代码如下（示例）：

 return {
        // 日期的限制条件
        pickerDisabled: {
          disabledDate: (time) => {
            //大于当天不能选择
            if(time.getTime()>Date.now()){
              return true;
            }
            //小于天不允许选择
            let sdate = new Date();
            let day=7;
            sdate.setTime(sdate.getTime() - 3600 * 1000 * 24 * day);
            if(time.getTime()<sdate.getTime()){
              return true;
            }
            return false;
          },
        },
}

二、限制所选天数小于7天，大于提示

1.控件

利用方法: @change="datechange"

代码如下（示例）：

<el-date-picker v-model="queryData.loginTime" value-format="yyyyMMddHHmmss" type="datetimerange" :clearable="false"
 :picker-options="pickerDisabled" :default-time="['00:00:00', '23:59:59']"
 start-placeholder="开始日期" end-placeholder="结束日期" @change="datechange">
</el-date-picker>

2.实现代码

代码如下（示例）：

datechange(){
        // 从配置项S0031中去默认查询天数
        let mrdays=this.$config.getConfigItemValue(this.$config.systemConfig.lslkcxrqlzdz).split(',')[1];
        // 所选日期差
        let day=this.$utilDate.getday(this.queryData.loginTime[1],this.queryData.loginTime[0]);
        if(day>mrdays){
            this.$message({
              message: '所选日期查询范围大于配置项'+mrdays+'天，请重新选择',
              type: 'warning'
            });
            this.queryData.loginTime=[];
        }
      },

 

14位日期相减得天数方法

// 14位日期相减得天数
const getday=(sdate,edate)=>{
  if(sdate && edate){
    let sdatetime=new Date(dateFtt(dateOriginal(sdate), 'yyyy/MM/dd HH:mm:ss')).getTime();
    let ddatetime=new Date(dateFtt(dateOriginal(edate), 'yyyy/MM/dd HH:mm:ss')).getTime();
    return parseInt((sdatetime-ddatetime)/1000/60/60/24);
  }
}