I'm currently developing a project where users can request appointments. I'm utilizing the v-calendar library, which incorporates a datepicker.
The challenge I'm facing is that users are able to request appointments at any time of day, 24/7, whereas I need to restrict it to only be available from 9am - 5pm. While I know we can limit the date selection in the date picker with something like :max-date="value", I haven't been able to find a way to limit the time range.
You can view a working example here.
Below is a snippet of code from the project:
name="appointment-date"
v-model="appointment_date"
mode="dateTime"
:is24hr="false"
:min-date="currentDate"
:model-config="dateTimePickerConfig"
:popover="{
visibility: 'click',
placement: 'auto',
}"
:masks="{ inputDateTime: 'MM/DD/YYYY h:mmA'}">
<template v-slot="{ inputValue, inputEvents }">
<div class="form-icon ">
<input-component
:value="inputValue"
v-on="inputEvents"
placeholder="MM-DD-YYYY h:mmA"
/>
<Icon name="date-time"/>
</div>
</template>
</date-picker>
Your assistance in resolving this issue would be greatly appreciated.
Thank you.