el-date-picker 禁止时间xaun ze

通过validator验证 ，当时间小于当前时间20分钟，清空选框的值,

disabledDate日期禁止选中，只能选7天之内的日期

效果：

 

<el-form-item label="短信发送时间" prop="smsSendTime"> 
   <el-date-picker
              v-model="queryParam.smsSendTime"
              type="datetime"  value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerTime"
              placeholder="选择日期时间">
   </el-date-picker>
</el-form-item>

data(){
      const validateDate = (rule, value, callback) => {
        if (value) {
          let timestamp = new Date().getTime()// 当前的时间戳
          timestamp = timestamp + (-0.16 * 60) * 60 * 1000
            if (value < util.dateFormat(timestamp)) {
              this.queryParam.smsSendTime =null
              callback(new Error('选择时间小于10分钟之内时间,请重新选择'));
            } else {
              callback();
            }
        } else {
          callback();
        }
      }
      return{
        queryParam: {},
        rulesMsg: {
          "smsSendTime": [
            { required: true, message: "请选择短信发送时间" },
            { validator: validateDate, trigger: 'blur' }
          ]
        }
      },
      pickerTime:{
           // 限制时间
           disabledDate: (time) => {
              // 设置可选择的日期为今天之后的一个月内
              const curDate = (new Date()).getTime()
              // 这里算出一个月的毫秒数, 这里使用30的平均值,实际中应根据具体的每个月有多少天计算
              const day = 7 * 24 * 3600 * 1000
              const dateRegion = curDate + day
              return time.getTime() < Date.now() - 8.64e7 ||  time.getTime() > dateRegion
            }
      }
 }

util 是一个公共的js里面用到一个方法格式化日期

//日期格式化

export const dateFormat = function (source, ignore_minute) {

var myDate;

var separate = '-';

var minute = '';

var fix = function (num, length) {

return ('' + num).length < length ? ((new Array(length + 1)).join('0') + num).slice(-length) : '' + num;

}

if (source === void (0)) {

source = new Date();

}

if (source) {

if (source.split) {

source = source.replace(/\-/g, '/');

} else if (isNaN(parseInt(source))) {

source = source.toString().replace(/\-/g, '/');

} else {

source = new Date(source);

}

 

if (new Date(source) && (new Date(source)).getDate) {

myDate = new Date(source);

if (!ignore_minute) {

minute = ' ' + fix(myDate.getHours(), 2) + ":" + fix(myDate.getMinutes(), 2)+ ":" + fix(myDate.getSeconds(), 2);

}

return myDate.getFullYear() + separate + fix((myDate.getMonth() + 1), 2) + separate + fix(myDate.getDate(), 2) + minute;

} else {

return source.slice(0, 16);

}

} else {

return source

}

};