mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
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
This commit is contained in:
parent
34bdf2fc10
commit
318240c14c
@ -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:
|
||||
|
@ -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."
|
||||
)
|
||||
|
@ -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) {
|
||||
|
Loading…
Reference in New Issue
Block a user