Ant Design Vue教程

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>
Catalog
快速入门 Dropdown 下拉菜单 Menu 导航菜单 Pagination 分页 Steps 步骤条 AutoComplete 自动填充 Cascader 级联选择 Checkbox 多选框 DatePicker 日期选择框 DatePicker 日期选择框用法 DatePicker 设置不可选日期 DatePicker 选择时间 DatePicker 设置日期格式 DatePicker 日期范围选择 DatePicker 定制日期单元格 DatePicker 自定义渲染 DatePicker 属性和事件 Input 输入框 InputNumber 数字输入框 Mentions 提及 Radio 单选框 Rate 评分组件 Select 下拉框 Slider 滑动输入条 Switch 开关