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,
};
}
|