应用antd-vue的工夫控件,并设置抉择范畴。通常需要都是只管制日期就好,然而也有需要是要求限度具体工夫的,从 antd-vue官网文档 上看到,show-timedisabled-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>