Ant DataPIcker 禁用时间和日期的方法

<template>
  <div>
    <a-date-picker
      style="width: 100%"
      show-time
      v-decorator="[
        'nextPmTime',
        {
          rules: [
            {
              required: true,
              message: $t('lang.placeholder.nextPmTime'),
            },
          ],
        },
      ]"
      placeholder="请输入谢谢"
      :disabled-date="disabledDate"
      :disabled-time="disabledDateTime"
      valueFormat="YYYY-MM-DD HH:mm:ss"
    >
      <!-- show-time       是否增加时间选择功能
      v-decorator     相当于V-Model不会使用v-decorator建议使用V-Model
      placeholder     输入框提示文字
      disabled-date   不可选择的日期
      disabled-time   不可选择的时间
      valueFormat     格式化传给后台的值 -->
    </a-date-picker>
  </div>
</template>
<script>
// 引入moment插件 灰常重要
import moment from "moment";
export default {
  methods: {
    // 禁用日期,返回true 就禁用掉
    disabledDate(current) {
      return current && current <= moment().startOf("day"); // 当前时间之前的所有日期都禁用
    },
    // 禁用时间调用的公共方法
    range(start, end) {
      const result = [];
      for (let i = start; i < end; i++) {
        result.push(i);
      }
      return result;
    },
    // 禁用时间,返回true 就禁用掉
    disabledDateTime(data) {
      let strtime;
      let newTime;
      data
        ? (strtime = new Date(data._i.replace(/-/g, "/")))
        : (strtime = moment());
      data
        ? (newTime = moment())
        : (newTime = moment().add(1, "days").startOf("day"));
      let hours = moment().hours(); //0~23
      let minutes = moment().minutes(); //0~59
      let seconds = moment().seconds(); //0~59 //当日只能选择当前时间之后的时间点
      if (strtime <= newTime) {
        return {
          disabledHours: () => this.range(0, 23).splice(0, hours),
          disabledMinutes: () => this.range(0, 59).splice(0, minutes),
          disabledSeconds: () => this.range(0, 59).splice(0, seconds),
        };
      }
    },
  },
};
</script>

 

posted on 2021-01-27 16:30  ㅤㅤㅤㅤㅤㅤ  阅读(597)  评论(0编辑  收藏  举报

导航