- {formatUnixTimestampToDateTime(event.start_time, locale, timezone)}
+ {formatUnixTimestampToDateTime(event.start_time, { ...config.ui })}
-
diff --git a/web/src/utils/dateUtil.ts b/web/src/utils/dateUtil.ts
index 39cc993b4..2891a690a 100644
--- a/web/src/utils/dateUtil.ts
+++ b/web/src/utils/dateUtil.ts
@@ -1,7 +1,8 @@
+import strftime from 'strftime';
+import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns';
export const longToDate = (long: number): Date => new Date(long * 1000);
export const epochToLong = (date: number): number => date / 1000;
export const dateToLong = (date: Date): number => epochToLong(date.getTime());
-import { fromUnixTime, intervalToDuration, formatDuration } from 'date-fns';
const getDateTimeYesterday = (dateTime: Date): Date => {
const twentyFourHoursInMilliseconds = 24 * 60 * 60 * 1000;
@@ -17,28 +18,53 @@ export const getNowYesterdayInLong = (): number => {
};
/**
- * This function takes in a unix timestamp, locale, timezone,
- * and returns a dateTime string.
- * If unixTimestamp is not provided, it returns 'Invalid time'
- * @param unixTimestamp: number
- * @param locale: string
- * @param timezone: string
- * @returns string - dateTime or 'Invalid time' if unixTimestamp is not provided
+ * This function takes in a Unix timestamp, configuration options for date/time display, and an optional strftime format string,
+ * and returns a formatted date/time string.
+ *
+ * If the Unix timestamp is not provided, it returns "Invalid time".
+ *
+ * The configuration options determine how the date and time are formatted.
+ * The `timezone` option allows you to specify a specific timezone for the output, otherwise the user's browser timezone will be used.
+ * The `use12hour` option allows you to display time in a 12-hour format if true, and 24-hour format if false.
+ * The `dateStyle` and `timeStyle` options allow you to specify pre-defined formats for displaying the date and time.
+ * The `strftime_fmt` option allows you to specify a custom format using the strftime syntax.
+ *
+ * If both `strftime_fmt` and `dateStyle`/`timeStyle` are provided, `strftime_fmt` takes precedence.
+ *
+ * @param unixTimestamp The Unix timestamp to format
+ * @param config An object containing the configuration options for date/time display
+ * @returns The formatted date/time string, or "Invalid time" if the Unix timestamp is not provided or invalid.
*/
-export const formatUnixTimestampToDateTime = (unixTimestamp: number, locale: string, timezone: string): string => {
+interface DateTimeStyle {
+ timezone: string;
+ use12hour: boolean | undefined;
+ date_style: 'full' | 'long' | 'medium' | 'short';
+ time_style: 'full' | 'long' | 'medium' | 'short';
+ strftime_fmt: string;
+}
+
+export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: DateTimeStyle): string => {
+ const { timezone, use12hour, date_style, time_style, strftime_fmt } = config;
+ const locale = window.navigator?.language || 'en-US';
+
if (isNaN(unixTimestamp)) {
return 'Invalid time';
}
try {
const date = new Date(unixTimestamp * 1000);
+
+ // use strftime_fmt if defined in config file
+ if (strftime_fmt) {
+ const strftime_locale = strftime.localizeByIdentifier(locale);
+ return strftime_locale(strftime_fmt, date);
+ }
+
+ // else use Intl.DateTimeFormat
const formatter = new Intl.DateTimeFormat(locale, {
- day: '2-digit',
- month: '2-digit',
- year: 'numeric',
- hour: '2-digit',
- minute: '2-digit',
- second: '2-digit',
- timeZone: timezone,
+ dateStyle: date_style,
+ timeStyle: time_style,
+ timeZone: timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
+ hour12: use12hour !== null ? use12hour : undefined,
});
return formatter.format(date);
} catch (error) {