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

}

};