antd vue 日期控件限制只可选择今天及今天以后的

最新推荐文章于 2022-12-13 16:11:24 发布

Edward_Cullens

最新推荐文章于 2022-12-13 16:11:24 发布

阅读量1.6k

点赞数 1

分类专栏： js 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/Edward_Cullens/article/details/126544603

版权

js 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <crec-date-picker
      placeholder="不预定"
      :disabledDate="disabledDate"
      :disabledTime="disabledDateTime"
      :showToday="false"
      @change="onChangePicker"
      :showTime="{ format: 'HH:mm:ss' }"
      format="YYYY-MM-DD HH:00"
    />
 
  </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) {
      // return current && current < moment().subtract(1, 'days')
      return current && current < moment().subtract(1, 'days').endOf('day')
      // return current && current < moment().endOf('day')
    },
    // 时间禁止
    disabledDateTime (dates) {
      const hours = moment().hours() + 1// 0~23
      // const minutes = moment().minutes()// 0~59
      // const seconds = moment().seconds()// 0~59
        // 当日只能选择当前时间之后的时间点
      if (moment(dates).date() === moment().date()) {
        return {
          disabledHours: () => this.range(0, 24).splice(0, hours),
          disabledMinutes: () => this.range(0, 60),
          disabledSeconds: () => this.range(0, 60)
        }
      } else {
        return {
          disabledMinutes: () => this.range(0, 60),
          disabledSeconds: () => this.range(0, 60)
        }
      }
    },

  }
}
</script>