应用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>