Ant Design Vue DatePicker设置不可选的日期和时间或月份

Ant Design Vue DatePicker设置不可选的日期和时间或月份，分别设置不可选日期、不可选时间、不可选月份。

设置不可选日期

我们通过以下代码来演示通过星期六星期天不能选择，disabledDate属性表示不可选的日期

<template>
  <div>
    <a-date-picker format="YYYY-MM-DD" :disabledDate="disabledDate"  /> 
  </div>
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    moment,
     //设置星期六星期天不能选择
    disabledDate(current) {
      return current.day() == 6 ||  current.day() == 0;
    },
  },
};
</script>

如果你是基于浏览器引入js的开发方式，请点击在线试一试查看代码

在线试一试

设置不可选时间

<template>
  <div>
    <a-date-picker
        format="YYYY-MM-DD HH:mm:ss"
       :showTime="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
      :disabledDate="disabledDate"
       :disabledTime="disabledDateTime"
        /> 
  </div>
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    moment,
     //设置星期六星期天不能选择
    disabledDate(current) {
      return current.day() == 6 ||  current.day() == 0;
    },
    //设置不可选的时间
     disabledDateTime() {
      return {
        disabledHours: () => this.range(0, 24).splice(4, 20),
        disabledMinutes: () => this.range(30, 60),
        disabledSeconds: () => [55, 56],
      };
    },
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
  },
};
</script>

设置月份不可选择

<template>
  <div>
    <a-month-picker :disabledDate="disabledDate" placeholder="选择月份" />
  </div>
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    moment,
     //设置6月到10月不能选择
    disabledDate(current) {
      return current.month()>=6 && current.month()<=10;
    }, 
  },
};
</script>

设置日期区间组件不可选

<template>
  <div> 
    <a-range-picker
      :disabledDate="disabledDate"
      :disabledTime="disabledRangeTime"
      :showTime="{
        hideDisabledOptions: true,
        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
      }"
      format="YYYY-MM-DD HH:mm:ss"
    />
  </div>
</template>
<script>
import moment from 'moment';
export default {
  methods: {
    moment,
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    disabledDate(current) {
      // Can not select days before today and today
      return current && current.day()!=1 && current.day()!=0;
    }, 
    disabledRangeTime(_, type) {
      if (type === 'start') {
        return {
          disabledHours: () => this.range(0, 60).splice(4, 20),
          disabledMinutes: () => this.range(30, 60),
          disabledSeconds: () => [30, 56],
        };
      }
      return {
        disabledHours: () => this.range(0, 60).splice(20, 4),
        disabledMinutes: () => this.range(0, 31),
        disabledSeconds: () => [30, 56],
      };
    },
  },
};
</script>