Estoy trabajando en un proyecto donde el usuario solicita una cita. Estoy usando v-calendar que usa datepicker .
Me enfrento a un problema en el que el usuario puede solicitar una cita en cualquier momento / 24 horas que necesito configurar solo de 9 a.m. a 5 p.m. Puedo ver que podemos limitar la fecha en el selector de fecha usando algo como :max-date="value" pero no pude encontrar cómo limitar el tiempo.
Aquí está el violín de trabajo
algo de código del proyecto
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>Su ayuda para resolver el problema será muy apreciada.
Gracias.
Si te entendí bien, quieres restringir la recolección de horas específicas. Esto es posible con v-calendar con la siguiente propiedad:
<v-date-picker v-model="date" :valid-hours="[0,3,4,5,8,16,20]" is24hr />Tenga en cuenta el atributo :valid-hours. Puede proporcionar qué horas deberían estar disponibles para que el usuario las elija. Si desea permitirles elegir minutos en 'intervalos' específicos, también puede usar lo siguiente:
<v-date-picker v-model="date" mode="dateTime" :minute-increment="15" />Nota: propiedad de incremento de minutos. Esto permitirá al usuario elegir entre '15 minutos. Así que los números disponibles serán 00, 15, 30, 45. Puedes jugar con él.
Desafortunadamente, no hay forma de desactivar los minutos, lo que me entristece. Como si alguien reservara una cita a las 9:15 a. m., preferiría "deshabilitar" las 9:15 a. m. para los próximos usuarios. Puede deshabilitar la hora completa (9 AM) pero no específicamente las 9:15, de modo que las 9:00, 9:30 y 9:45 aún estén disponibles. Al menos no conozco ninguna manera fácil.
Espero que esto ayude a alguien.
================ ACTUALIZACIÓN =================
Tenga en cuenta que v-calendar agregó esas propiedades adicionales en una versión específica de v-calendar. Lo he estado usando con v2.4. , parece v2.3. aún no lo tiene.