# All files / js/composables useDateTimeFormat.ts

64.86% Statements 24/37
54.83% Branches 17/31
53.33% Functions 8/15
62.5% Lines 20/32

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116

    5x

    5x

    1x
    1x
    1x

    1x

    6x
    4x
    6x

    2x

    2x

    2x
    2x
    1x

    2x
    2x
    1x

    2x
    2x
    1x

     import { computed } from 'vue';
    import { usePage } from '@inertiajs/vue3';

    export interface DateTimeFormatProps {
        timezone: string;
        date_format: 'dd/mm/yyyy' | 'mm/dd/yyyy' | 'yyyy-mm-dd' | 'd mmm yyyy';
        time_format: '24h' | '12h';
    }

    function resolveLocaleForDateFormat(format: DateTimeFormatProps['date_format']): string {
        switch (format) {
            case 'mm/dd/yyyy':
                return 'en-US';
            case 'yyyy-mm-dd':
                return 'sv-SE';
            case 'd mmm yyyy':
                return 'en-GB';
            case 'dd/mm/yyyy':
            default:
                return 'en-GB';
        }
    }

    export function buildDateTimeOptions(
        format: DateTimeFormatProps | undefined,
    ): { locale: string; timezone: string; hour12: boolean } {
        const dateFormat = format?.date_format ?? 'dd/mm/yyyy';
        const timeFormat = format?.time_format ?? '24h';
        const timezone = format?.timezone || 'UTC';

        return {
            locale: resolveLocaleForDateFormat(dateFormat),
            timezone,
            hour12: timeFormat === '12h',
        };
    }

    function toValidDate(value: string | Date | null | undefined): Date | null {
        if (!value) return null;
        const date = value instanceof Date ? value : new Date(value);
        return Number.isNaN(date.getTime()) ? null : date;
    }

    function formatDateValue(date: Date, format: DateTimeFormatProps): string {
        return new Intl.DateTimeFormat(resolveLocaleForDateFormat(format.date_format), {
            timeZone: format.timezone,
            year: 'numeric',
            month: format.date_format === 'd mmm yyyy' ? 'short' : '2-digit',
            day: '2-digit',
        }).format(date);
    }

    function formatTimeValue(date: Date, format: DateTimeFormatProps): string {
        return new Intl.DateTimeFormat(resolveLocaleForDateFormat(format.date_format), {
            timeZone: format.timezone,
            hour12: format.time_format === '12h',
            hour: '2-digit',
            minute: '2-digit',
        }).format(date);
    }

    export function formatLocalizedDate(value: string | Date | null | undefined, format: DateTimeFormatProps): string {
        const date = toValidDate(value);
        if (!date) return 'N/A';
        return formatDateValue(date, format);
    }

    export function formatLocalizedTime(value: string | Date | null | undefined, format: DateTimeFormatProps): string {
        const date = toValidDate(value);
        if (!date) return 'N/A';
        return formatTimeValue(date, format);
    }

    export function formatLocalizedDateTime(value: string | Date | null | undefined, format: DateTimeFormatProps): string {
        const date = toValidDate(value);
        if (!date) return 'N/A';
        return `${formatDateValue(date, format)} ${formatTimeValue(date, format)}`;
    }

    export function useDateTimeFormat() {
        const page = usePage();

        const dateTimeFormat = computed(
            () => (page.props.dateTimeFormat as DateTimeFormatProps | undefined),
        );

        const resolved = computed(() => buildDateTimeOptions(dateTimeFormat.value));

        function normalizedFormat(): DateTimeFormatProps {
            return {
                timezone: dateTimeFormat.value?.timezone || 'UTC',
                date_format: dateTimeFormat.value?.date_format || 'dd/mm/yyyy',
                time_format: dateTimeFormat.value?.time_format || '24h',
            };
        }

        function formatDate(value: string | Date | null | undefined): string {
            return formatLocalizedDate(value, normalizedFormat());
        }

        function formatTime(value: string | Date | null | undefined): string {
            return formatLocalizedTime(value, normalizedFormat());
        }

        function formatDateTime(value: string | Date | null | undefined): string {
            return formatLocalizedDateTime(value, normalizedFormat());
        }

        return {
            dateTimeFormat,
            formatDate,
            formatTime,
            formatDateTime,
        };
    }