时间选择器,起止时间不能大于31天

 js文件

export default {
    /**
   * 计算时间差天数
   * @param {String} sDate1 
   * @param {String} sDate2 
   */
  datedifference(sDate1, sDate2) {    //sDate1和sDate2是yyyy-mm-dd格式
    let dateSpan,iDays;
    sDate1 = Date.parse(sDate1);
    sDate2 = Date.parse(sDate2);
    dateSpan = sDate2 - sDate1;
    dateSpan = Math.abs(dateSpan);
    iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
    return iDays;
  },  
}

 组件

<el-form :inline="true" :model="filters">
    <el-form-item label="发起时间:" prop="dateranTime">
            <el-date-picker
              v-model="filters.effectiveTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              @change="timeChuo" // 给一个事件
            ></el-date-picker>
          </el-form-item>
</el-form>

// 引入js

methods:{
  timeChuo(val) {
    // 因为js中写到要 年-月-日 格式的,time1.time2 先定义一下
      var time1 = val[0]
      var time2 = val[1]
      this.filters.timeStart = new Date(val[0]).valueOf() / 1000;
      this.filters.timeEnd = new Date(val[1]).valueOf() / 1000;
      let time = util.datedifference(time1,time2) // util 是一个js的文件名 
      console.log(util.datedifference(time1,time2)); // 这里打印的就是 选择的天数
      if(time>31){
        return this.$message.warning('起止时间间隔不大于31天')
      }
    },  
}

  

 

posted @ 2021-03-10 17:59  挽你手  阅读(469)  评论(0编辑  收藏  举报