antd vue中a-date-picker禁用日期和时分

最新推荐文章于 2024-05-15 14:07:05 发布

达拉~

最新推荐文章于 2024-05-15 14:07:05 发布

阅读量516

点赞数 7

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_54968142/article/details/136483329

版权

<template>
  <div class="home">
    <a-date-picker
      v-model="value1"
      format="YYYY-MM-DD HH:mm:ss"
      showTime
      placeholder="Select date"
      :disabled-date="(val) => disabledDate(val, 'test')"
      :disabled-time="disabledTime"
      style="width: 100%"
    >
    </a-date-picker>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'home',
  data() {
    return {
      value1: moment('2024-03-07 20:10:00'),
      testDate: '2024-03-07 20:50:00',
    }
  },
  methods: {
    disabledDate(current, type) {
      if (type === 'test') {
        return current && current < moment(this.testDate).startOf('day')
      }
      return false
    },
    generateRange(num1, num2) {
      return [...Array(num1).keys()].filter((item) => item < num2)
    },
    disabledTime() {
      let current = moment(this.value1).format('YYYY-MM-DD')
      let currentH = moment(this.value1).format('H') * 1
      let target = moment(this.testDate).format('YYYY-MM-DD')
      let h = moment(this.testDate).format('H') * 1
      let m = moment(this.testDate).format('m') * 1
      let s = moment(this.testDate).format('s') * 1
      if (current === target) {
        if (currentH === h) {
          return {
            disabledHours: () => this.generateRange(24, h),
            disabledMinutes: () => this.generateRange(60, m + 1),
            disabledSeconds: () => this.generateRange(60, s),
          }
        } else {
          return {
            disabledHours: () => this.generateRange(24, h),
            disabledMinutes: () => this.generateRange(60, 0),
            disabledSeconds: () => this.generateRange(60, 0),
          }
        }
      } else {
        return {
          disabledHours: () => this.generateRange(24, 0),
          disabledMinutes: () => this.generateRange(60, 0),
          disabledSeconds: () => this.generateRange(60, 0),
        }
      }
    },
  },
}
</script>
<style scoped>
.home {
  width: 500px;
}
</style>