From 1fc2927805b9066a2369702808f3d12bc2b20105 Mon Sep 17 00:00:00 2001
From: Nick Mowen <nickmowen213@gmail.com>
Date: Thu, 23 Feb 2023 07:16:23 -0700
Subject: [PATCH] Add docs with examples

---
 docs/docs/configuration/index.md | 35 +++++++++++++++++++++-----------
 web/src/utils/dateUtil.ts        |  3 ++-
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/docs/docs/configuration/index.md b/docs/docs/configuration/index.md
index 89790650b..918195953 100644
--- a/docs/docs/configuration/index.md
+++ b/docs/docs/configuration/index.md
@@ -477,18 +477,6 @@ cameras:
       order: 0
       # Optional: Whether or not to show the camera in the Frigate UI (default: shown below)
       dashboard: True
-      # Optional: Override browser locale and show time in 12 / 24 hour format (default: use browser locale)
-      use12hour: False
-      # Optional: Set the date style for a specified length. 
-      # Options are: full, long, medium, sort (default: shown below).
-      date_style: short
-      # Optional: Set the time style for a specified length. 
-      # Options are: full, long, medium, sort (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
 ui:
@@ -498,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, hour12, or hour24 (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/web/src/utils/dateUtil.ts b/web/src/utils/dateUtil.ts
index d7b152c4f..b5c483496 100644
--- a/web/src/utils/dateUtil.ts
+++ b/web/src/utils/dateUtil.ts
@@ -45,11 +45,12 @@ interface DateTimeStyle {
 
 export const formatUnixTimestampToDateTime = (unixTimestamp: number, config: DateTimeStyle): string => {
   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);