feat(tool): date-time converter

package-lock.json

@@ -16,6 +16,7 @@
         "bip39": "^3.0.4",
         "buffer": "^6.0.3",
         "crypto-js": "^4.1.1",
+        "date-fns": "^2.28.0",
         "lodash": "^4.17.21",
         "naive-ui": "^2.28.0",
         "pinia": "^2.0.11",

package.json

@@ -22,6 +22,7 @@
     "bip39": "^3.0.4",
     "buffer": "^6.0.3",
     "crypto-js": "^4.1.1",
+    "date-fns": "^2.28.0",
     "lodash": "^4.17.21",
     "naive-ui": "^2.28.0",
     "pinia": "^2.0.11",

src/plugins/naive.plugin.ts

@@ -44,9 +44,11 @@ import {
   NTag,
   NInputGroup,
   NInputGroupLabel,
+  NDivider,
 } from 'naive-ui';
 
 const components = [
+  NDivider,
   NInputGroup,
   NInputGroupLabel,
   NTag,

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>

src/tools/date-time-converter/index.ts

@@ -0,0 +1,11 @@
+import { Calendar } from '@vicons/tabler';
+import type { ITool } from '../Tool';
+
+export const tool: ITool = {
+  name: 'Date-time converter',
+  path: '/date-converter',
+  description: 'Convert date and time into the various different formats',
+  keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'mounth', 'day', 'minute', 'seconde'],
+  component: () => import('./date-time-converter.vue'),
+  icon: Calendar,
+};

src/tools/index.ts

@@ -7,6 +7,7 @@ import { tool as uuidGenerator } from './uuid-generator';
 import { tool as romanNumeralConverter } from './roman-numeral-converter';
 import { tool as cypher } from './encryption';
 import { tool as bip39 } from './bip39-generator';
+import { tool as dateTimeConverter } from './date-time-converter';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -17,7 +18,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Converter',
     icon: LockOpen,
-    components: [romanNumeralConverter],
+    components: [dateTimeConverter, romanNumeralConverter],
   },
 ];