feat(tool): date-time converter

src/tools/date-time-converter/date-time-converter.vue

@@ -0,0 +1,111 @@
+<template>
+    <div>
+        <n-card>
+            <n-space justify="center">
+                <n-form-item label="Use current date-time ?" label-placement="left" :show-feedback="false">
+                    <n-switch v-model:value="useCurrentDate" />
+                </n-form-item>
+            </n-space>
+            <n-form-item :feedback="inputInvalid ? 'Invalid date for the current format' : ''"
+                :validation-status="inputInvalid ? 'error' : undefined">
+                <n-input-group style="flex-grow: 1;">
+                    <n-select v-model:value="inputFormat" style="width: 200px;"
+                        :options="formats.map(({ name }, i) => ({ label: name, value: i }))"
+                        :disabled="useCurrentDate" />
+
+                    <n-input v-model:value="inputDate" :on-input="onDateInputChanged" :disabled="useCurrentDate"
+                        placeholder="Your date string..." />
+                </n-input-group>
+            </n-form-item>
+            <n-divider style="margin-top: 0;"></n-divider>
+            <div v-for="{ name, fromDate } in formats" :key="name" style="margin: 5px 0;">
+                <n-input-group>
+                    <n-input-group-label style="width: 150px;">{{ name }}</n-input-group-label>
+                    <n-input :value="fromDate(date)" />
+                </n-input-group>
+            </div>
+        </n-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRafFn } from '@vueuse/core';
+import { formatISO, formatISO9075, formatRFC3339, formatRFC7231, fromUnixTime, getTime, getUnixTime, isDate, parseISO, parseJSON } from 'date-fns';
+import { ref } from 'vue'
+
+const useCurrentDate = ref(true)
+const inputDate = ref('')
+const inputFormat = ref(6)
+const inputInvalid = ref(false)
+const date = ref(new Date())
+
+useRafFn(() => {
+    if (useCurrentDate.value) {
+        date.value = new Date()
+    }
+})
+
+function onDateInputChanged(value: string) {
+    const { toDate } = formats[inputFormat.value]
+    inputInvalid.value = false
+
+    try {
+        const formatted: Date | string = toDate(value)
+
+        if (!isDate(formatted) || isNaN(formatted.getTime())) {
+            throw 'invalid date'
+        }
+
+        date.value = formatted
+    } catch (_) {
+        inputInvalid.value = true
+    }
+}
+
+const formats = [
+    {
+        name: 'JS locale date string',
+        fromDate: (date: Date) => date.toString(),
+        toDate: (date: string) => new Date(date)
+    },
+    {
+        name: 'ISO 8601',
+        fromDate: (date: Date) => formatISO(date),
+        toDate: (date: string) => parseISO(date)
+    },
+    {
+        name: 'ISO 9075',
+        fromDate: (date: Date) => formatISO9075(date),
+        toDate: (date: string) => parseISO(date)
+    },
+    {
+        name: 'RFC 3339',
+        fromDate: (date: Date) => formatRFC3339(date),
+        toDate: (date: string) => new Date(date)
+    },
+    {
+        name: 'RFC 7231',
+        fromDate: (date: Date) => formatRFC7231(date),
+        toDate: (date: string) => new Date(date)
+    },
+    {
+        name: 'Timestamp',
+        fromDate: (date: Date) => String(getTime(date)),
+        toDate: (ms: string) => parseJSON(+ms)
+    },
+    {
+        name: 'Unix timestamp',
+        fromDate: (date: Date) => String(getUnixTime(date)),
+        toDate: (sec: string) => fromUnixTime(+sec)
+    },
+    {
+        name: 'UTC format',
+        fromDate: (date: Date) => date.toUTCString(),
+        toDate: (date: string) => new Date(date)
+    },
+]
+
+</script>
+
+<style lang="scss" scoped>
+</style>