fix: Add missing AM/PM logic

Author: Jasenkoo

src/Vue3DatePicker/components/TimePicker/TimeInput.vue

@@ -21,6 +21,9 @@
                 <ChevronDownIcon />
             </div>
         </div>
+        <div v-if="!is24">
+            <button class="dp__pm_am_button" @click="setAmPm">{{ amPm }}</button>
+        </div>
         <SelectionGrid
             v-if="hourOverlay"
             @update:modelValue="$emit('update:hours', $event)"
@@ -56,7 +59,7 @@
     import { computed, defineComponent, PropType, ref, toRef } from 'vue';
     import { ChevronUpIcon, ChevronDownIcon, ClockIcon } from '../Icons';
     import { IDateFilter, IDefaultSelect, ITimeRange, TimeInputProps } from '../../interfaces';
-    import { getArrayInArray } from '../../utils/util';
+    import { getArrayInArray, hoursToAmPmHours } from '../../utils/util';
     import SelectionGrid from '../SelectionGrid.vue';
 
     export default defineComponent({
@@ -86,9 +89,11 @@
             const minuteOverlay = ref(false);
             const hours = toRef(props, 'hours');
             const minutes = toRef(props, 'minutes');
+            const amPm = ref('AM');
 
             const hourDisplay = computed((): string => {
-                return hours.value < 10 ? `0${hours.value}` : `${hours.value}`;
+                const hour = convert24ToAmPm(hours.value);
+                return hour < 10 ? `0${hour}` : `${hour}`;
             });
 
             const minuteDisplay = computed((): string => {
@@ -177,6 +182,28 @@
                 }
             };
 
+            const convert24ToAmPm = (time: number): number => {
+                if (props.is24) {
+                    return time;
+                }
+                if (time >= 12) {
+                    amPm.value = 'PM';
+                } else {
+                    amPm.value = 'AM';
+                }
+                return hoursToAmPmHours(time);
+            };
+
+            const setAmPm = () => {
+                if (amPm.value === 'PM') {
+                    amPm.value = 'AM';
+                    emit('update:hours', hours.value - 12);
+                } else {
+                    amPm.value = 'PM';
+                    emit('update:hours', hours.value + 12);
+                }
+            };
+
             return {
                 showTimePicker,
                 hourOverlay,
@@ -189,6 +216,8 @@
                 getMinutesGridItems,
                 handleHours,
                 handleMinutes,
+                setAmPm,
+                amPm,
             };
         },
     });

src/Vue3DatePicker/components/TimePicker/TimePicker.vue

@@ -50,10 +50,6 @@
                             :min-time="minTime"
                         />
                     </template>
-                    <!-- todo - add this -->
-                    <!--                    <div v-if="!is24" class="dp__pm_am_button">-->
-                    <!--                        <div><button>PM</button></div>-->
-                    <!--                    </div>-->
                 </div>
                 <div class="dp__button" @click="toggleTimePicker(false)"><CalendarIcon /></div>
             </div>

src/Vue3DatePicker/style/components/_TimeInput.scss

@@ -37,3 +37,12 @@
         color: var(--dp-primary-color);
     }
 }
+
+.dp__pm_am_button {
+    background: var(--dp-primary-color);
+    color: var(--dp-primary-text-color);
+    border: none;
+    padding: 10px;
+    border-radius: $dp__border_radius;
+    cursor: pointer;
+}

src/Vue3DatePicker/utils/util.ts

@@ -157,3 +157,12 @@ export const getMonthNames = (locale: string): string[] => {
     });
     return months.map((date) => formatter.format(date).slice(0, 3));
 };
+
+/**
+ * Since internally watched values are in 24h mode, this will get am-pm value from set hour
+ */
+export const hoursToAmPmHours = (index: number): number => {
+    const hoursValues = [12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
+
+    return hoursValues[index];
+};