Add a new time_pattern option. (#242)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Patrick Kissling <[email protected]>
pkissling · Oct 17, 2023 · 56e293d · 56e293d
1 parent 53ba77c
commit 56e293d
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -103,6 +103,7 @@ weather_icon_type: line
 animated_icon: true
 forecast_rows: 5
 locale: en-GB
+time_pattern: HH:mm
 time_format: 24
 date_pattern: P
 hide_today_section: false
@@ -127,7 +128,8 @@ time_zone: null
 | animated_icon         | boolean          | **Optional** | Whether the large weather icon should be animated                                                                                                                                                                                 | `true`    |
 | forecast_rows         | number           | **Optional** | The amount of weather forecast rows to show. Depending on `hourly_forecast` each row either corresponds to a day or an hour                                                                                                       | `5`       |
 | locale                | string[^2]       | **Optional** | Language to use for language specific text and date/time formatting. If not provided, falls back to the locale set in HA or, if not set in HA, to `en-GB`                                                                         | `en-GB`   |
-| time_format           | `24` \| `12`     | **Optional** | Format used to display the time. If not provided, falls back to the default time format of the configured `locale`                                                                                                                | `24`      |
+| time_format           | `24` \| `12`     | **Optional** | Format used to display the time. If not provided, falls back to the default time format of the configured `locale`.  This option is ignored if `time_pattern` is set.                                                             | `24`      |
+| time_pattern          | string           | **Optional** | Pattern to use for time formatting. See [luxon](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) for valid tokens. If not provided, falls back to time_format option.                                              | `null`    |
 | date_pattern          | string           | **Optional** | Pattern to use for date formatting. If not provided, falls back to a localized default date formatting. See [luxon](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) for valid tokens                              | `D`       |
 | hide_today_section    | boolean          | **Optional** | Hides the cards today section (upper section), containing the large weather icon, clock and current date                                                                                                                          | `false`   |
 | hide_forecast_section | boolean          | **Optional** | Hides the cards forecast section (lower section),containing the weather forecast                                                                                                                                                  | `false`   |

diff --git a/src/clock-weather-card.ts b/src/clock-weather-card.ts
@@ -390,6 +390,7 @@ export class ClockWeatherCard extends LitElement {
       hourly_forecast: config.hourly_forecast ?? false,
       animated_icon: config.animated_icon ?? true,
       time_format: config.time_format?.toString() as '12' | '24' | undefined,
+      time_pattern: config.time_pattern ?? undefined,
       hide_forecast_section: config.hide_forecast_section ?? false,
       hide_today_section: config.hide_today_section ?? false,
       hide_clock: config.hide_clock ?? false,
@@ -440,6 +441,10 @@ export class ClockWeatherCard extends LitElement {
   }
 
   private time (date: DateTime = this.currentDate): string {
+    if (this.config.time_pattern) {
+      return this.toZonedDate(date).toFormat(this.config.time_pattern)
+    }
+
     if (this.config.time_format) {
       return this.toZonedDate(date)
         .toFormat(this.config.time_format === '24' ? 'HH:mm' : 'h:mm a')

diff --git a/src/types.ts b/src/types.ts
@@ -19,6 +19,7 @@ export interface ClockWeatherCardConfig extends LovelaceCardConfig {
   forecast_rows?: number
   locale?: string
   time_format?: '12' | '24'
+  time_pattern?: string
   date_pattern?: string
   hide_today_section?: boolean
   hide_forecast_section?: boolean
@@ -39,6 +40,7 @@ export interface MergedClockWeatherCardConfig extends LovelaceCardConfig {
   forecast_rows: number
   locale?: string
   time_format?: '12' | '24'
+  time_pattern?: string
   date_pattern: string
   hide_today_section: boolean
   hide_forecast_section: boolean