diff --git a/docs/docs/configuration/index.md b/docs/docs/configuration/index.md index aff20b5ca..976312250 100644 --- a/docs/docs/configuration/index.md +++ b/docs/docs/configuration/index.md @@ -486,6 +486,29 @@ ui: timezone: None # Optional: Use an experimental recordings / camera view UI (default: shown below) experimental_ui: False + # Optional: Set the time format used. + # Options are browser, 12hour, or 24hour (default: shown below) + time_format: browser + # Optional: Set the date style for a specified length. + # Options are: full, long, medium, sort + # Examples: + # short: 2/11/23 + # medium: Feb 11, 2023 + # full: Saturday, February 11, 2023 + # (default: shown below). + date_style: short + # Optional: Set the time style for a specified length. + # Options are: full, long, medium, sort + # Examples: + # short: 8:14 PM + # medium: 8:15:22 PM + # full: 8:15:22 PM Mountain Standard Time + # (default: shown below). + time_style: medium + # Optional: Ability to manually override the date / time styling to use strftime format + # https://www.gnu.org/software/libc/manual/html_node/Formatting-Calendar-Time.html + # possible values are shown above (default: not set) + strftime_fmt: "%Y/%m/%d %H:%M" # Optional: Telemetry configuration telemetry: diff --git a/frigate/config.py b/frigate/config.py index 562ac4a50..9a96b642a 100644 --- a/frigate/config.py +++ b/frigate/config.py @@ -66,6 +66,12 @@ class LiveModeEnum(str, Enum): webrtc = "webrtc" +class TimeFormatEnum(str, Enum): + browser = "browser" + hours12 = "12hour" + hours24 = "24hour" + + class DateTimeStyleEnum(str, Enum): full = "full" long = "long" @@ -79,7 +85,9 @@ class UIConfig(FrigateBaseModel): ) timezone: Optional[str] = Field(title="Override UI timezone.") use_experimental: bool = Field(default=False, title="Experimental UI") - use12hour: Optional[bool] = Field(title="Override UI time format.") + time_format: TimeFormatEnum = Field( + default=TimeFormatEnum.browser, title="Override UI time format." + ) date_style: DateTimeStyleEnum = Field( default=DateTimeStyleEnum.short, title="Override UI dateStyle." ) diff --git a/web/src/utils/dateUtil.ts b/web/src/utils/dateUtil.ts index 2891a690a..b5c483496 100644 --- a/web/src/utils/dateUtil.ts +++ b/web/src/utils/dateUtil.ts @@ -37,19 +37,20 @@ export const getNowYesterdayInLong = (): number => { */ interface DateTimeStyle { timezone: string; - use12hour: boolean | undefined; + time_format: 'browser' | '12hour' | '24hour'; 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'; + const { timezone, time_format, 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); @@ -64,7 +65,7 @@ export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: Dat dateStyle: date_style, timeStyle: time_style, timeZone: timezone || Intl.DateTimeFormat().resolvedOptions().timeZone, - hour12: use12hour !== null ? use12hour : undefined, + hour12: time_format !== 'browser' ? time_format == '12hour' : undefined, }); return formatter.format(date); } catch (error) {