如何在vue3组合中创建自定义日期和时间输入

Question

我正在vue3组合API中创建预订表单，我已经能够将日期输入设置为从当天开始，因此当天之前的任何其他日期都是无效的并且无法选择。我一直在尝试在时间输入中做同样的事情，但它似乎不起作用。 我无法设置最长和最短时间。另外，我希望时间变得无效，并且在其他用户已经选择特定时间后，用户无法选择该时间。

这是我当前拥有的代码的 vue Playground 演示 Vue Playground

Answer 1

• min 和 max 属性正在起作用。它们不会阻止用户选择 0 到 24 之间的任何值，但在提交表单时，输入将显示一条警告消息，例如“值必须为 8 或更高”。请参阅此处的 type="time" 文档：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

• 在 updateAvailableTimes 中，直接比较 startTime 和 endTime，但它们是 Date 对象，由于 Date 对象的毫秒部分，比较可能无法按预期进行。相反，您应该比较 Date 对象的小时和分钟部分。

这是一个可行的解决方案，希望对您有所帮助：

<script setup>
import { reactive, ref } from 'vue'

const formData = reactive({
    name: '',
    email: '',
    date: '',
    phone: '',
    time: ''
})

const availableTimes = ref([])
const minTime = ref('08:00') // 8am
const maxTime = ref('22:00') // 10pm

const selectedDates = ref([]) // Store selected dates
const selectedTimes = ref([]) // Store selected times

const updateAvailableTimes = () => {
    let startTime = new Date(`2022-01-01T${minTime.value}`)
    let endTime = new Date(`2024-01-01T${maxTime.value}`)
    const timeInterval = 30 // minutes

    availableTimes.value = []

    while (startTime.getTime() <= endTime.getTime()) {
        availableTimes.value.push(startTime.toISOString().slice(11,16)) // Get time in HH:MM format
        startTime.setMinutes(startTime.getMinutes() + timeInterval)
    }
}

updateAvailableTimes()

const removeSelectedDate = () => {
    if (selectedDates.value.includes(formData.date)) {
        alert('This date is already taken. Please select a different date')
    } else {
        selectedDates.value.push(formData.date)
    }
}

const removeSelectedTime = () => {
    if (selectedTimes.value.includes(formData.time)) {
        alert('This time is already taken. Please select a different time')
    } else if (!availableTimes.value.includes(formData.time)) {
        alert('This time is not available. Please select a different time')
    } else {
        selectedTimes.value.push(formData.time)
    }
}

const currentDate = ref(new Date().toISOString().slice(0, 10)) // Get current date in YYYY-MM-DD format

const handleSubmit = () => {
    console.log('Form submitted:', formData)
    formData.date = ''
    formData.time = ''
}
</script>