friends-best/pages/utilities/time.vue
Louis Hollingworth 14659122c3
All pages now in Nuxt, work next on nav.
DB connected, check issues with writing.

Signed-off-by: Louis Hollingworth <louis@hollingworth.ch>
2023-05-16 20:17:33 +01:00

52 lines
1.6 KiB
Vue

<template>
<div>
<NavHeader class="h-screen-1/20" />
<div class="grid h-screen-19/20 place-items-center">
<div class="grid place-items-center">
<h1 class="text-6xl font-bold underline p-4">Time Utilities</h1>
<p class="p-4" >Your current timezone: {{ timezone }}</p>
<p>
The current time in Unix Epoch: <code>{{ Math.floor(unix/1000) }}</code> <br />
or <code>{{ unix }}</code> in milliseconds.
</p>
<p class="p-4">
To format the time for Discord, you can use: <br />
<TimeFormat :crnt-time="unix" d-format="f" :format="{
dateStyle: 'long',
timeStyle: 'short',
hour12: false
}"/> <br />
<TimeFormat :format="{
dateStyle: 'full',
timeStyle: 'short',
hour12: false
}" dFormat="F" :crnt-time="unix" />
<br />
<TimeFormat :format="{
timeStyle: 'short',
hour12: false
}" dFormat="t" :crnt-time="unix" />
<br />
<TimeFormat :format="{
timeStyle: 'medium',
hour12: false
}" dFormat="T" :crnt-time="unix" />
<br />
<TimeFormat :format="{
dateStyle: 'short'
}" dFormat="d" :crnt-time="unix" />
<br />
<TimeFormat :format="{
dateStyle: 'medium'
}" dFormat="D" :crnt-time="unix" />
</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const unix = Date.now();
</script>