ElementUI中关于时间/日期选择器的一些小总结

ElementUI时间限制展示

• Template

<el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
	<el-form-item label="时间范围" prop="startTime" label-width="100">
        <el-date-picker
          clearable
          size="small"
          v-model="queryParams.startTime"
          type="datetime"
          placeholder="开始时间"
		  value-format="yyyy-MM-dd HH:mm:ss"
          @change="startime"
          :picker-options="optionStart"
        ></el-date-picker>
	</el-form-item>
	<el-form-item label="时间范围" prop="endTime" label-width="100">
        <el-date-picker
          clearable
          size="small"
          v-model="queryParams.endTime"
          type="datetime"
          placeholder="结束时间"
		  value-format="yyyy-MM-dd HH:mm:ss"
          @change="endtime"
          :picker-options="optionEnd"
        ></el-date-picker>
	</el-form-item>
<el--form>

• Data

queryParams: {
    startTime: undefined,
    endTime: undefined
},
// 时间限制选中
optionStart: [],
optionEnd: [],

• Methods

	startime(val) {
      this.optionEnd = Object.assign({}, this.optionEnd, {
        disabledDate: time => {
          return (
            new Date(time).getTime() <= new Date(this.queryParams.startTime)
          );
        }
      });
    },
    /**结束时间 控制开始时间 */
    endtime(value) {
      if (!value) {
        //为了解决点击输入框内的×之后时间限制没有变化，不能自由选择，这里利用设置了2999年之后都可选
        // 可通过箭头函数的方式访问到this
        this.optionStart = Object.assign({}, this.optionStart, {
          // 可通过箭头函数的方式访问到this
          disabledDate: time => {
            return time.getTime() >= new Date("2999-12-30 23:59:59").getTime();
          }
        });
        return;
      }
      this.optionStart = Object.assign({}, this.optionStart, {
        // 可通过箭头函数的方式访问到this
        disabledDate: time => {
          return (
            time.getTime() >
            new Date(this.queryParams.endTime).getTime() - 24 * 3600 * 1000
          );
        }
      });
    },

• 结果如下图

注意：其中的value-format="yyyy-MM-dd HH:mm:ss"最好加上，方便后端接收

ElementUI时间日期校验

data(){
	// 开始时间校验
    var validTimeStart = (rule, value, callback) => {
        var start = new Date(this.form.etaStart);
        var end = new Date(this.form.etaEnd);
        console.log("end", this.form.etaEnd);
        console.log("st", this.form.etaStart);

        if (start.getTime() > end.getTime()) {
            callback(new Error("开始时间不能大于结束时间"));
        }
        callback();
    };
    // 结束时间校验
    var vaildTimeEnd = (rule, value, callback) => {
        var start = new Date(this.form.etaStart);
        var end = new Date(this.form.etaEnd);
        if (end.getTime() <= start.getTime()) {
            callback(new Error("结束时间不能小于开始时间"));
        }
        callback();
    };
    return {
        rules:{
        	etaStart: [{required: true,message: "开始时间不能为空",trigger: "blur"},
          		{validator: validTimeStart,trigger: "blur"}],
        	etaEnd: [{required: true,message: "结束时间不能为空",trigger: "blur"},
          		{validator: vaildTimeEnd,trigger: "blur"}],
        }
    }
}

ElementUI中$message多个消息提示解决

// 判断当前el-message是否存在，存在则不通知，不存在再弹出消息提示框
let doms = document.getElementsByClassName('el-message')[0];
if(doms===undefined){
    this.$message.success("下发成功")
}

当你的程序出错，满屏幕都是message，心态崩了😫