Add docs for time / date styling (#5572)

* Add docs for time / date styling

* Convert 12hour time format option to enum

* Change option in web

* Add docs with examples

* Fix errors in docs

* Fix mismatched names

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:

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."
     )

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 { timezone, time_format, date_style, time_style, strftime_fmt } = config;
-  const locale = window.navigator?.language || 'en-US';
+  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) {