关于antd-vue:antdvue-adatepicker-组件限制时间选择范围

11次阅读

共计 1238 个字符，预计需要花费 4 分钟才能阅读完成。

应用 antd-vue 的工夫控件，并设置抉择范畴。通常需要都是只管制日期就好，然而也有需要是要求限度具体工夫的，从 antd-vue 官网文档上看到，show-time和 disabled-time 一起应用能够实现限度工夫可用范畴。应用如下：

<template>
  <div>
    <span> 给定工夫，限度可选范畴：{{setDate}}</span>
  </div>
  <a-date-picker
    v-model:value="bookDeliveryTime"
    valueFormat="YYYY-MM-DD HH:mm:ss"
    :disabled="pickerDisabled"
    :disabled-date="disabledDate"
    :disabled-time="disabledDateTime"
    show-time
    @change="changeDeliveryTime"
  />
</template>

<script setup>
import {ref} from "@vue/reactivity"
import moment from "moment"

const setDate = ref(moment(new Date()).format("YYYY-MM-DD HH:mm:ss"))
const bookDeliveryTime = ref(null)
const pickerDisabled = ref(false)

// 日期限度
const disabledDate = current => {
  // 蕴含当天以及之后的 7 天可选
  return current < moment().startOf('day') || current > moment().add(7, 'days')
}
// 工夫限度
const disabledDateTime = datetime => {
  // 当日只能抉择以后工夫之后的工夫点，否则不做限度
  if (datetime && datetime.date() === moment().date()) {const hours = moment().hours() // 以后工夫的时分秒
    return {disabledHours: () => range(0, hours + 1), // 假如以后为 7 点整，则 0 - 7 都不可选
      disabledMinutes: () => [], // 因为 7 点不可选，所以不可选的分钟和秒钟的数组为空，即 0 -59 这 60 个数字都可选
      disabledSeconds: () => []
    }
  }
}
// 对应的工夫（时、分、秒）的范畴
const range = (start, end) => {const result = []
  for (let i = start; i < end; i++) {result.push(i)
  }
  return result
}
const changeDeliveryTime = (val, date, d) => {if (!val) return
    bookDeliveryTime.value = moment(val).format('YYYY-MM-DD HH:mm:ss')
}
</script>

正文完