Events Page: Added option to override browser time format and style

[sinamics]

Implements #5476

new optional ui config entries:

ui:
  use12hour: false     # true | false
  dateStyle: 'short'   # 'full' | 'long' | 'medium' | 'short
  timeStyle: 'medium'  # 'full' | 'long' | 'medium' | 'short

Would be nice if someone else could test and provide feedback.
one issue, when "full" is used (highly unlikely) it will clutter the mobile view, but at least it gives the user the option.

A few examples:

ui:
  dateStyle: 'full' 
  timeStyle: 'full'

(default)
ui:
  dateStyle: 'short' 
  timeStyle: 'medium'

ui:
  use12hour: true
  dateStyle: 'short' 
  timeStyle: 'medium'

ui:
  use12hour: true
  dateStyle: 'short' 
  timeStyle: 'short'

[netlify]

✅ Deploy Preview for frigate-docs canceled.

Name	Link
🔨 Latest commit	f9f8ba7
🔍 Latest deploy log	https://app.netlify.com/sites/frigate-docs/deploys/63f2304d97276100082b9fd2

[NickM-27]

Are the date separators still inherited from the language?

[sinamics]

Are the date separators still inherited from the language?

damn, your are fast. 👍
I tested using 'en-US' instead of 'nb-NO' as language and it changes the date format to M/d/yyyy.
tested on Edge, Chrome, Firefox

[ehn]

I think this only captures a few of the date/time formats people want. For example, if you're outside of the US you probably don't want M/d/yyyy even if you want your UI in English. This won't let you set your date/time formats independent of the language.

How about letting the user specify an explicit strftime() format string? Alternatively, specifying another POSIX locale for LC_TIME?

[sinamics]

Take 2
Modified based on @ehn comment. I do see the usecase to explicit define the date format in some cases and strftime would satisfy all users due to the flexibillity.

I was indecisive about whether to keep the previous configuration or switch entierly to strftime. After evaluating the added complexity that comes with using strftime, I decided to keep both solutions for the time being. Some users may only want to utilize use12hour.

config:

ui:
  use12hour: false # true | false
  dateStyle: 'short' # 'full' | 'long' | 'medium' | 'short
  timeStyle: 'medium' # 'full' | 'long' | 'medium' | 'short
  # NOTE! If strftime_fmt are provided it will takes precedence over the others
  strftime_fmt: '%A, %B %e, %Y %I:%M:%S %p %Z'

couple of thoughts

• In order to provide more local-specific formatting, strftime supports a few locales. The locale for the user's browser will be used if e.g full time pattern format is specified with the day in clear text.
• To support the use of strftime in the frontend, the strftime (MIT) npm package has been included in the project.
• If strftime_fmt are provided it will takes precedence over the others
• strftime_fmt config entry has no validation for now, so if users type in "hello world" it will be shown in the datetime field. I find it tricky to generate a reqex to validate the string as there is so many diffrent variation of the strftime format.

frontend

    // 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, {
      dateStyle,
      timeStyle,
      timeZone: timezone || Intl.DateTimeFormat().resolvedOptions().timeZone,
      hour12: use12hour !== null ? use12hour : undefined,
    });
    return formatter.format(date);

[blakeblackshear]

We don't use camelCase for any other properties in the config. Lets switch these to underscores for consistency.

[NickM-27]

This option needs to be added to the docs. I would also suggest linking to https://www.gnu.org/software/libc/manual/html_node/Formatting-Calendar-Time.html so users are aware how it works

[NickM-27]

Have to say though, I wasn't super interested in this until I started playing with it but it is really nice being able to fully customize how the dates / times are presented

[sinamics]

i will be away for the next week, but will update the docs when im back.

[ehn]

There seems to be a bug here. If you set strftime_fmt (in my case to "%Y-%m-%d %H:%M:%S"), the presentation ignores the timezone setting (in my case Europe/Stockholm).

Please let me know if it's better to open a new issue than discuss it here.

[brunopiras]

There seems to be a bug here. If you set strftime_fmt (in my case to "%Y-%m-%d %H:%M:%S"), the presentation ignores the timezone setting (in my case Europe/Stockholm).

Please let me know if it's better to open a new issue than discuss it here.

Me too, without strftime_fmt the time is set to timezone!