feat: Add support for UTC zone (resolves #88)

Author: Jasenkoo

index.d.ts

@@ -188,6 +188,7 @@ interface Vue3DatePicker {
     maxRange?: number | string;
     fixedStart?: boolean;
     fixedEnd?: boolean;
+    utc?: boolean;
 }
 
 interface PublicMethods extends MethodOptions {

src/Vue3DatePicker/Vue3DatePicker.vue

@@ -284,6 +284,7 @@
         maxRange: { type: [Number, String] as PropType<number | string>, default: null },
         fixedStart: { type: Boolean as PropType<boolean>, default: false },
         fixedEnd: { type: Boolean as PropType<boolean>, default: false },
+        utc: { type: Boolean as PropType<boolean>, default: false },
     });
     const slots = useSlots();
     const isOpen = ref(false);
@@ -296,6 +297,7 @@
     provide('textInput', toRef(props, 'textInput'));
 
     onMounted(() => {
+        // store.setTimezone(props.timezone);
         parseExternalModelValue(props.modelValue);
         if (!props.inline) {
             window.addEventListener('scroll', onScroll);
@@ -346,6 +348,7 @@
             props.enableSeconds,
             formatLocaleRef,
             props.multiDates,
+            props.utc,
             emit,
         );
 

src/Vue3DatePicker/components/composition/external-internal-mapper.ts

@@ -1,6 +1,7 @@
 import { ComputedRef, Ref, ref, watch } from 'vue';
 
 import {
+    dateToUtc,
     formatDate,
     getDefaultPattern,
     getTImeForExternal,
@@ -36,6 +37,7 @@ export const useExternalInternalMapper = (
     enableSeconds: boolean,
     formatLocale: ComputedRef<Locale>,
     multiDates: boolean,
+    utc: boolean,
     emit: VueEmit,
 ): IExternalInternalMapper => {
     const inputValue = ref('');
@@ -135,7 +137,12 @@ export const useExternalInternalMapper = (
             if (internalModelValue.value && range && partialRange && internalModelValue.value.length === 1) {
                 internalModelValue.value.push(null);
             }
-            emit('update:modelValue', internalModelValue.value);
+            const zonedDate = utc
+                ? Array.isArray(internalModelValue.value)
+                    ? internalModelValue.value.map((date) => (date ? dateToUtc(date) : date))
+                    : dateToUtc(internalModelValue.value)
+                : internalModelValue.value;
+            emit('update:modelValue', zonedDate);
         }
         formatInputValue();
     };

src/Vue3DatePicker/utils/date-utils.ts

@@ -236,3 +236,16 @@ export const isMonthWithinRange = (
 
     return valid;
 };
+
+export const dateToUtc = (date: Date): string => {
+    const utcDate = Date.UTC(
+        date.getUTCFullYear(),
+        date.getUTCMonth(),
+        date.getUTCDate(),
+        date.getUTCHours(),
+        date.getUTCMinutes(),
+        date.getUTCSeconds(),
+    );
+
+    return new Date(utcDate).toISOString();
+};