refactor: Additional validation for min and max time

- Time will be preset to current time

Author: Jasenkoo

src/Vue3DatePicker/components/Calendar.vue

@@ -181,15 +181,22 @@
                 }
 
                 weekDays.value = getDayNames(props.locale, +props.weekStart);
+                const date = new Date();
 
                 if (singleModelValue.value) {
                     hoursSingle.value = singleModelValue.value.getHours();
                     minutesSingle.value = singleModelValue.value.getMinutes();
+                } else {
+                    hoursSingle.value = date.getHours();
+                    minutesSingle.value = date.getMinutes();
                 }
 
                 if (rangeModelValue.value && rangeModelValue.value[0] && rangeModelValue.value[1]) {
                     hoursRange.value = [rangeModelValue.value[0].getHours(), rangeModelValue.value[1].getHours()];
                     minutesRange.value = [rangeModelValue.value[0].getMinutes(), rangeModelValue.value[1].getMinutes()];
+                } else {
+                    hoursRange.value = [date.getHours(), date.getHours()];
+                    minutesRange.value = [date.getMinutes(), date.getMinutes()];
                 }
             });
 

src/Vue3DatePicker/components/TimePicker/TimeInput.vue

@@ -56,7 +56,7 @@
 </template>
 
 <script lang="ts">
-    import { computed, defineComponent, PropType, ref, toRef } from 'vue';
+    import { computed, defineComponent, onMounted, PropType, ref, toRef } from 'vue';
     import { ChevronUpIcon, ChevronDownIcon, ClockIcon } from '../Icons';
     import { IDateFilter, IDefaultSelect, ITimeRange, TimeInputProps } from '../../interfaces';
     import { getArrayInArray, hoursToAmPmHours } from '../../utils/util';
@@ -91,6 +91,10 @@
             const minutes = toRef(props, 'minutes');
             const amPm = ref('AM');
 
+            onMounted(() => {
+                checkMinMaxHours();
+            });
+
             const hourDisplay = computed((): string => {
                 const hour = convert24ToAmPm(hours.value);
                 return hour < 10 ? `0${hour}` : `${hour}`;
@@ -127,13 +131,37 @@
                 minuteOverlay.value = !minuteOverlay.value;
             };
 
+            const checkMinMaxHours = (): void => {
+                if (Object.keys(props.maxTime).length) {
+                    if (props.maxTime.hours && hours.value > props.maxTime.hours) {
+                        emit('update:hours', +props.maxTime.hours);
+                    }
+                    if (props.maxTime.minutes && minutes.value > props.maxTime.minutes) {
+                        emit('update:minutes', +props.maxTime.minutes);
+                    }
+                }
+                if (Object.keys(props.minTime).length) {
+                    if (props.minTime.hours && hours.value < props.minTime.hours) {
+                        emit('update:hours', +props.minTime.hours);
+                    }
+                    if (props.minTime.minutes && minutes.value < props.minTime.minutes) {
+                        emit('update:minutes', +props.minTime.minutes);
+                    }
+                }
+            };
+
             const handleHours = (type: string): void => {
                 if (type === 'increment') {
                     if (props.maxTime.hours) {
                         if (hours.value + +props.hoursIncrement > +props.maxTime.hours) {
                             return;
                         }
                     }
+                    if (props.minTime.hours) {
+                        if (hours.value + +props.hoursIncrement < +props.minTime.hours) {
+                            return;
+                        }
+                    }
                     if (
                         (props.is24 && hours.value + +props.hoursIncrement >= 24) ||
                         (!props.is24 && hours.value + +props.hoursIncrement >= 12)
@@ -148,6 +176,11 @@
                             return;
                         }
                     }
+                    if (props.maxTime.hours) {
+                        if (hours.value - +props.hoursIncrement > +props.maxTime.hours) {
+                            return;
+                        }
+                    }
                     if (hours.value - +props.hoursIncrement < 0) {
                         emit('update:hours', props.is24 ? 24 - +props.hoursIncrement : 12 - -+props.hoursIncrement);
                     } else {
@@ -163,6 +196,11 @@
                             return;
                         }
                     }
+                    if (props.minTime.minutes) {
+                        if (minutes.value + +props.minutesIncrement < +props.minTime.minutes) {
+                            return;
+                        }
+                    }
                     if (minutes.value + +props.minutesIncrement >= 60) {
                         emit('update:minutes', 0);
                     } else {
@@ -174,6 +212,11 @@
                             return;
                         }
                     }
+                    if (props.maxTime.minutes) {
+                        if (minutes.value + +props.minutesIncrement > +props.maxTime.minutes) {
+                            return;
+                        }
+                    }
                     if (minutes.value - +props.minutesIncrement < 0) {
                         emit('update:minutes', 60 - +props.minutesIncrement);
                     } else {