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

<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" />
      <div v-for="{ name, fromDate } in formats" :key="name" style="margin: 5px 0">
        <n-input-group>
          <n-input-group-label style="flex: 0 0 170px"> {{ name }}: </n-input-group-label>
          <input-copyable :value="fromDate(baseDate)" />
        </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';
import InputCopyable from '../../components/InputCopyable.vue';

const useCurrentDate = ref(true);
const inputDate = ref('');
const inputFormat = ref(6);
const inputInvalid = ref(false);
const baseDate = ref(new Date());

useRafFn(() => {
  if (useCurrentDate.value) {
    baseDate.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 new Error('Invalid date');
    }

    baseDate.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>