v-datetime

Formats and displays ISO datetime strings. By default, input is treated as UTC and converted to local time for display.

Usage

<!-- Default format (from config) -->
<span v-datetime="'2024-01-15T10:30:00Z'"></span>

<!-- Date only -->
<span v-datetime="isoDate" date-only></span>

<!-- Custom format (date-fns syntax) -->
<span v-datetime="isoDate" format="MMM d, yyyy"></span>

<!-- Relative: shows time if today, full date otherwise -->
<span v-datetime="isoDate" relative-date></span>

<!-- Simplified: hides date if today, hides year if current year -->
<span v-datetime="isoDate" simplified-date></span>

<!-- Treat input as local time (don't assume UTC) -->
<span v-datetime="localDate" local></span>

<!-- Display in UTC -->
<span v-datetime="isoDate" display-utc></span>

<!-- Placeholder when null -->
<span v-datetime="null" placeholder="N/A"></span>

Modifiers

Attribute	Description
date-only	Show date without time
format	Custom date-fns format string
relative-date	Show time if today, full date otherwise
simplified-date	Hide date if today, hide year if current year
local	Treat input as local time instead of UTC
display-utc	Display the output in UTC
placeholder	Text to show when the value is null

Demo

<template>
    <div>
        <p style="margin-bottom: 8px">
            <label><strong>Pick a date/time:</strong> <input type="datetime-local" v-model="pickerValue" style="margin-left: 4px" /></label>
        </p>

        <p style="margin-bottom: 8px">
            <label
                ><strong>defaultDateFormat:</strong>
                <input
                    v-model="dateFormat"
                    @input="applyConfig"
                    style="margin-left: 4px; width: 100px; padding: 2px 6px; font-family: monospace; font-size: 0.9em"
            /></label>
            <label style="margin-left: 16px"
                ><strong>defaultTimeFormat:</strong>
                <input
                    v-model="timeFormat"
                    @input="applyConfig"
                    style="margin-left: 4px; width: 80px; padding: 2px 6px; font-family: monospace; font-size: 0.9em"
            /></label>
        </p>

        <p v-if="formatError" style="margin-bottom: 8px; color: var(--vp-c-danger-1)">{{ formatError }}</p>

        <p style="margin-bottom: 8px">
            <strong>ISO input:</strong> <code>{{ isoDate }}</code>
        </p>

        <table :key="configKey" style="border-collapse: collapse; width: 100%">
            <thead>
                <tr>
                    <th style="text-align: left; padding: 8px; border-bottom: 2px solid var(--vp-c-divider)">Modifier</th>
                    <th style="text-align: left; padding: 8px; border-bottom: 2px solid var(--vp-c-divider)">Output</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)">Default</td>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><span v-datetime="isoDate"></span></td>
                </tr>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><code>date-only</code></td>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><span v-datetime="isoDate" date-only></span></td>
                </tr>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><code>format="MMM d, yyyy"</code></td>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)">
                        <span v-datetime="isoDate" format="MMM d, yyyy"></span>
                    </td>
                </tr>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><code>relative-date</code></td>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><span v-datetime="isoDate" relative-date></span></td>
                </tr>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><code>simplified-date</code></td>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><span v-datetime="isoDate" simplified-date></span></td>
                </tr>
                <tr>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><code>placeholder="N/A"</code> (null value)</td>
                    <td style="padding: 8px; border-bottom: 1px solid var(--vp-c-divider)"><span v-datetime="null" placeholder="N/A"></span></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script lang="ts" setup>
import { configureVf } from '@zyno-io/vue-foundation';
import { format } from 'date-fns';
import { computed, onBeforeUnmount, ref } from 'vue';

const defaultDate = new Date(Date.now() - (3 * 60 + 25) * 60 * 1000);
const toLocalISOString = (d: Date) => {
    const pad = (n: number) => String(n).padStart(2, '0');
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
};

const pickerValue = ref(toLocalISOString(defaultDate));
const isoDate = computed(() => (pickerValue.value ? new Date(pickerValue.value).toISOString() : null));

const DEFAULT_DATE_FORMAT = 'M/d/yy';
const DEFAULT_TIME_FORMAT = 'H:mm';
const dateFormat = ref(DEFAULT_DATE_FORMAT);
const timeFormat = ref(DEFAULT_TIME_FORMAT);
const configKey = ref(0);
const formatError = ref('');

function applyConfig() {
    try {
        format(new Date(), dateFormat.value);
        format(new Date(), timeFormat.value);
        formatError.value = '';
        configureVf({ defaultDateFormat: dateFormat.value, defaultTimeFormat: timeFormat.value });
        configKey.value++;
    } catch {
        formatError.value = 'Invalid format string';
    }
}

onBeforeUnmount(() => {
    configureVf({ defaultDateFormat: DEFAULT_DATE_FORMAT, defaultTimeFormat: DEFAULT_TIME_FORMAT });
});
</script>