vue element日期格式、范围限制

第一种：选择时间和选择日期可以切换，当前日期之前的不能选择，开始时间和结束时间进行比较

当全天关闭时开始时间和结束时间可以选择带时间的日期，当全天开启时开始时间和结束时间只能选择日期，

<template>
  <div>
		<el-form
		      class="abow_dialog"
		      :model="ruleForm"
		       ref="ruleForm"
		      :rules="rules"
		      label-width="180px"
		    >
	   <el-form-item label="全天:" prop="newIsDay">
          <el-switch v-model="newIsDay"  @change="isDaySwitch()"></el-switch>
        </el-form-item>
        <el-form-item label="开始时间:" :required="true">
          <el-col :span="11">
            <el-form-item prop="beginTime">
              <el-date-picker time-arrow-control :type="dateTimeShow?'datetime':'date'" :format="dateTimeShow?'yyyy-MM-dd HH:mm':'yyyy-MM-dd'" :value-format="dateTimeShow?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'" :default-time="nowTime" placeholder="选择日期时间" v-model="ruleForm.beginTime" :picker-options="expireTimeOption" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="结束时间:" :required="true">
          <el-col :span="11">
            <el-form-item prop="endTime">
              <el-date-picker time-arrow-control :type="dateTimeShow?'datetime':'date'" :format="dateTimeShow?'yyyy-MM-dd HH:mm':'yyyy-MM-dd'" :value-format="dateTimeShow?'yyyy-MM-dd HH:mm:ss':'yyyy-MM-dd'" :default-time="nowNextTime" placeholder="选择日期时间" v-model="ruleForm.endTime" :picker-options="expireTimeOption" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
		</el-form>
	</div>
</template>
<script>
  export default {
    data(){
      var validatebeginTime=(rule, value, callback) =>{
        if(value == null){
          callback(new Error('请选择日期'));
          return;
        }
        if(this.ruleForm.endTime != ''){
          if(
            this.ruleForm.endTime.replace(/-/g,"\/")
            <
            this.ruleForm.beginTime.replace(/-/g,"\/")
          ){
            callback(new Error('开始日期不能大于结束日期'));
            return;
          }
        }
        if(this.newIsDay == false){
          if(this.ruleForm.beginTime!=""){
            var regex=/\b(0+)/gi
            var choiceTimeHours =  this.ruleForm.beginTime.slice(10,13)
            //09去掉0
            var newChoiceTimeHours = (choiceTimeHours+'').replace(regex,"")
            var nowTimeHours =  parseInt(newChoiceTimeHours)+1
            var nowTimeMinutes =  this.ruleForm.beginTime.slice(14,16)
            this.nowNextTime =nowTimeHours+':'+nowTimeMinutes+':00'
          }
        }
        callback();
      }
      var validateendTime=(rule, value, callback) =>{
        if(value == null){
          callback(new Error('请选择日期'));
          return;
        }
        //时间比较
        if(
          this.ruleForm.endTime.replace(/-/g,"\/")
          <
          this.ruleForm.beginTime.replace(/-/g,"\/")
        ){
          callback(new Error('结束日期不能小于开始日期'));
          return;
        }
        callback();
      }
      return {
        nowTime:"",
        nowNextTime:"",
        dateTimeShow:true,
        newIsDay:false,
        ruleForm: {
          isDay:"0",
          beginTime:"",
          endTime:"",
        },
        rules: {
          beginTime: [
                { required: true, validator: validatebeginTime, trigger: 'change' }
              ],
              endTime: [
                { required: true, validator: validateendTime, trigger: 'change' }
              ]
        },
        //今天之前的日期不能选择
        expireTimeOption: {
          disabledDate(date) {
            return date.getTime() < Date.now() - 24 * 60 * 60 * 1000;
          }
        }
      }
    },
    created(){
		  this.Time();
	  },
    methods: {
    	//控制全天
	  	isDaySwitch(){
         this.$nextTick(()=>{
            if(this.newIsDay == true){
              this.ruleForm.isDay = "1";
              this.dateTimeShow = false;
              this.ruleForm.beginTime = ""
              this.ruleForm.endTime = ""
            }else if(this.newIsDay == false){
              this.ruleForm.isDay = "0";
              this.dateTimeShow = true;
              this.ruleForm.beginTime = ""
              this.ruleForm.endTime = ""
            }
          })
        },
        Time(){
          this.nowTime ='09:00:00'
        },
	  },
  }
</script>

第二种：datetimerange只能选择当前日期之前的日期和时间，

<template>
  <div>
		<el-form
		  class="abow_dialog"
		  :model="ruleForm"
		  ref="ruleForm"
		  :rules="rules"
		  label-width="180px"
		>
	   <el-form-item label="日期："  prop="value">
        <el-date-picker
            v-model="ruleForm.value"
            type="datetimerange"
            time-arrow-control
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['08:30:00', '17:30:00']"
            :picker-options="expireTimeOption"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 100%;"
        >
          </el-date-picker>
      </el-form-item>
		</el-form>
	</div>
</template>
<script>
  export default {
    data(){
      let _this = this;
      return {
        ruleForm: {
          value: '',
        },
        rules: {
          value:[
            { required: true, message: '请选择日期', trigger: 'change' },
          ],
        },
        expireTimeOption: {
          disabledDate(time) {
            // let current_time = new Date().Format('yyyy-MM-dd')+' 23:59:59';  //时间日期为：当前日期 23:59:59
            let current_time = _this.Format('YYYY-mm-dd',new Date()) + ' 23:59:59'
            let t = new Date(current_time); //当前日期 23:59:59’的时间戳
            return time.getTime() > t;
          }
        }
      }
    },
    created(){
	  },
    methods: {
	  	// 时间转换
      Format(fmt, date) {
        let ret = ''
        date = new Date(date)
        const opt = {
          'Y+': date.getFullYear().toString(), // 年
          'm+': (date.getMonth() + 1).toString(), // 月
          'd+': date.getDate().toString(), // 日
          'H+': date.getHours().toString(), // 时
          'M+': date.getMinutes().toString(), // 分
          'S+': date.getSeconds().toString() // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        }
        for (let k in opt) {
          ret = new RegExp('(' + k + ')').exec(fmt)
          if (ret) {
            fmt = fmt.replace(
              ret[1],
              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
            )
          }
        }
        return fmt
      },
	  },
  }
</script>

第三种：monthrange只能选择当前月份之前的月份

<template>
  <div>
		<el-form
		  class="abow_dialog"
		  :model="ruleForm"
		  ref="ruleForm"
		  :rules="rules"
		  label-width="180px"
		>
	   <el-form-item label="日期："  prop="value">
        <el-date-picker
          class="fl"
          v-model="ruleForm.value"
          unlink-panels
          prefix-icon="el-icon-date"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions3"
          :default-value="timeDefaultShow"
          format="yyyy-MM"
          value-format="yyyy-MM"
          >
        </el-date-picker>
      </el-form-item>
		</el-form>
	</div>
</template>
<script>
  export default {
    data(){
      return {
        ruleForm: {
          value: '',
        },
        timeDefaultShow:'',
        rules: {
          value:[
            { required: true, message: '请选择日期', trigger: 'change' },
          ],
        },
        // 日期选择控件
        pickerOptions3: {
          disabledDate(time) {
            var date = new Date();
            var year = date.getFullYear();
            var month = date.getMonth();
            var day = date.getDay();
            month = (month > 9) ? month : ("0" + month);
            day = (day < 10) ? ("0" + day) : day;
            var today = year + "-" + month + "-" + day;
            var startDate= today.replace(new RegExp("-","gm"),"/");
            var startDateM = (new Date(startDate)).getTime(); 
            return time.getTime() > startDateM;
          }
        },
      }
    },
    created(){
	  },
    mounted(){
    },
    methods: {
	  },
  }
</script>