Vue＞＞Iview＞＞时间不可选万能模板___一蓑烟雨任平生

涉及了所有时间的禁用

拿走不谢

<template>
  <Form :model="form" :rules="rules">
    <FormItem label="yyyy-MM-dd格式：" prop="date1">
      <DatePicker v-model="form.date1" type="date" placeholder="请选择" format="yyyy-MM-dd"></DatePicker>
      <label>选择日期+验证，如：2021-08-27</label>
    </FormItem>
    
    <FormItem label="yyy/MM/dd格式：">
      <DatePicker v-model="form.date2" type="date" placeholder="请选择" format="yyyy/MM/dd"></DatePicker>
      <label>选择日期，如：2021/08/27</label>
    </FormItem>
    
    <FormItem label="yyyy-MM-dd HH:mm格式：">
      <DatePicker v-model="form.date3" type="datetime" placeholder="请选择" format="yyyy-MM-dd HH:mm"></DatePicker>
      <label>选择日期+时分，如：2021-08-27 10:30</label>
    </FormItem>
    
    <FormItem label="yyyy-MM-dd HH:mm:ss格式：">
      <DatePicker v-model="form.date4" type="datetime" placeholder="请选择" format="yyyy-MM-dd HH:mm:ss"></DatePicker>
      <label>选择日期+时分秒，如：2021-08-27 10:30:50</label>
    </FormItem>
    
    <FormItem label="yyyy-MM-dd格式：">
      <DatePicker v-model="form.date5" type="date" placeholder="请选择" :options="options1"></DatePicker>
      <label>当前日期之前的日期不可选</label>
    </FormItem>
    
    <FormItem label="yyyy-MM-dd格式：">
      <DatePicker v-model="form.date6" type="date" placeholder="请选择" :options="options2"></DatePicker>
      <label>指定日期之前的日期不可选，如：2021-08-27之前不可选</label>
    </FormItem>
    
    <FormItem label="yyyy-MM-dd格式：">
      <DatePicker v-model="form.date7" type="date" placeholder="请选择" :options="options3"></DatePicker>
      <label>当前日期之后的日期不可选</label>
    </FormItem>
    
    <FormItem label="yyyy-MM-dd格式：">
      <DatePicker v-model="form.date8" type="date" placeholder="请选择" :options="options4"></DatePicker>
      <label>指定日期之后的日期不可选，如：2021-08-27之后不可选</label>
    </FormItem>
    
    <FormItem label="yyyy-MM-dd格式：">
      <DatePicker v-model="form.date9" type="date" placeholder="请选择" :options="options5"></DatePicker>
      <label>日期区间可选，如：2021-08-27至2021-09-07可选</label>
    </FormItem>
    
    <FormItem label="yyyy-MM-dd格式：">
      <DatePicker v-model="form.date10" type="daterange" placeholder="请选择"></DatePicker>
      <label>双日期</label>
    </FormItem>

    <FormItem label="yyyy-MM-dd格式：">
      <Button type="warning" class="btn" @click="save('form')"><i class="fa fa-floppy-o"></i>保 存</Button>
      <Button type="default" class="btn" @click="cancel('form')" style="margin-left: 8px"><i class="fa fa-undo"></i>取 消</Button>
    </FormItem>
  </Form>
</template>
<script>
export default {
  data: {
    return {
      form: {
        date1: null,
        date2: null,
        date3: null,
        date4: null,
        date5: null,
        date6: null,
        date7: null,
        date8: null,
        date9: null,
        date10: null
      },
      options1: {
        disabledDate(date){
          return date && date.valueOf() < new Date() - 86400000;
        }
      },
      options2: {
        disabledDate(date){
          return date && date.valueOf() < new Date("2021-08-27") - 86400000;
        }
      },
      options3: {
        disabledDate(date){
          return date && date.valueOf() > new Date();
        }
      },
      options4: {
        disabledDate(date){
          return date && date.valueOf() > new Date("2021-08-27");
        }
      },
      options5: {
        disabledDate(date){
          return(date && date.valueOf() < new Date("2021-08-27")- 86400000 || date.valueOf() > new Date("2021-09-07");
        }
      },
      form: {
        date1: 
          date1: [
            {
              required: true,
              message: '请选择日期',
              trigger: 'change',
              type: 'date'
            }
          ]
      },
    };
  },
  methods: {
    save(name){
      this.$refs[name].validate = ((valid)=>{
        if(valid){
          this.$Message.success = ("Success!");
        }else{
          this.$Message.error = ("Fail!");
        }
      });
    },
    cancel(){
      this.$refs[name].resetFields();
    },
  },
};
</script>