vue+element 对日期时间选取做限制及上传时格式的判断

首先,我们要说明下需求!

  • 开始时间及结束时间默认为三天前到今天
  • 开始时间不能选取结束时间之后(结束时间同理)
  • 上传时间为yyyy-MM-dd hh:mm:ss格式
  • 其中一个需求是只能选择未来一个月的数据,代码在下

注意: 当时间为空时,不能设置为yyyy-MM-dd hh:mm:ss格式

template:

<el-date-picker type="datetime" :picker-options="pickerOptions0" v-model="startDate" placeholder="开始时间"
        style="width: 195px" transfer></el-date-picker>
      <el-date-picker type="datetime" :picker-options="pickerOptions1" v-model="endDate" placeholder="结束时间"
        style="width: 195px" transfer></el-date-picker>

data中: 

        startDate: new Date(new Date() - 24 * 60 * 60 * 1000 * 3), //开始时间
        endDate: new Date(), //结束时间
        pickerOptions0: {
          disabledDate: (time) => {
            if (this.endDate) {
              return time.getTime() > this.endDate || time.getTime() > new Date()
            }

          }
        },
        pickerOptions1: {
          disabledDate: (time) => {
            if (this.startDate) {
              return time.getTime() < this.startDate || time.getTime() > new Date()
            }
          }
        },

上传参数时(用了三元表达式):

startDate: this.startDate == null ? '' : this.startDate.format("yyyy-MM-dd hh:mm:ss"),
endDate: this.endDate == null ? '' : this.endDate.format("yyyy-MM-dd hh:mm:ss"),

 上传之前判断只能选择未来一个月的数据(此时开始时间已经定位今日,且不可选!):

var datadiff = this.endDate - this.startDate;
if (this.startDate != null && this.endDate != null && datadiff > 24 * 60 * 60 * 1000 * 30){
   this.$message.error('当前查询时间段大于1个月,请重新选择!');
   return false
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章