Add a new time_pattern option.

README.md

@@ -127,7 +127,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 through to time_pattern format                                                                                                                                            | `null`    |
+| time_pattern          | string           | **Optional** | Pattern to use for time formatting. If not provided, falls back to a localized default time formatting. See [luxon](https://moment.github.io/luxon/#/formatting?id=table-of-tokens) for valid tokens                              | `HH:MM`   |
 | 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`   |

src/clock-weather-card.ts

@@ -7,7 +7,7 @@
   hasAction,
   type ActionHandlerEvent,
   handleAction,
   TimeFormat
 } from 'custom-card-helpers' // This is a community maintained npm module with common helper functions/types. https://github.com/custom-cards/custom-card-helpers
 
 import {
@@ -390,6 +390,7 @@
       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 ?? 'HH:mm',
       hide_forecast_section: config.hide_forecast_section ?? false,
       hide_today_section: config.hide_today_section ?? false,
       hide_clock: config.hide_clock ?? false,
@@ -440,19 +441,13 @@
   }
 
   private time (date: DateTime = this.currentDate): string {
+    // Honor deprecated time_format setting until removed
     if (this.config.time_format) {
       return this.toZonedDate(date)
         .toFormat(this.config.time_format === '24' ? 'HH:mm' : 'h:mm a')
     }
-    if (this.hass.locale.time_format === TimeFormat.am_pm) {
-      return this.toZonedDate(date).toFormat('h:mm a')
-    }
-
-    if (this.hass.locale.time_format === TimeFormat.twenty_four) {
-      return this.toZonedDate(date).toFormat('HH:mm')
-    }
 
-    return this.toZonedDate(date).toFormat('t')
+    return this.toZonedDate(date).toFormat(this.config.time_pattern)
   }
 
   private getIconAnimationKind (): 'static' | 'animated' {

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