Add

src/panels/lovelace/cards/clock/hui-clock-card-analog.ts

@@ -34,12 +34,16 @@ export class HuiClockCardAnalog extends LitElement {
 
   @state() private _dateTimeFormat?: Intl.DateTimeFormat;
 
+  @state() private _dateFormat?: Intl.DateTimeFormat;
+
   @state() private _hourOffsetSec?: number;
 
   @state() private _minuteOffsetSec?: number;
 
   @state() private _secondOffsetSec?: number;
 
+  @state() private _date?: string;
+
   private _initDate() {
     if (!this.config || !this.hass) {
       return;
@@ -60,6 +64,17 @@ export class HuiClockCardAnalog extends LitElement {
         resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
     });
 
+    if (this.config.date_format === "day") {
+      this._dateFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
+        day: "2-digit",
+        timeZone:
+          this.config.time_zone ||
+          resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
+      });
+    } else {
+      this._dateFormat = undefined;
+    }
+
     this._computeOffsets();
   }
 
@@ -111,6 +126,13 @@ export class HuiClockCardAnalog extends LitElement {
     this._secondOffsetSec = secondsWithMs;
     this._minuteOffsetSec = minute * 60 + secondsWithMs;
     this._hourOffsetSec = hour12 * 3600 + minute * 60 + secondsWithMs;
+
+    if (this._dateFormat) {
+      const dateParts = this._dateFormat.formatToParts();
+      this._date = dateParts.find((part) => part.type === "day")?.value;
+    } else {
+      this._date = undefined;
+    }
   }
 
   render() {
@@ -231,6 +253,9 @@ export class HuiClockCardAnalog extends LitElement {
                 }s;`}
               ></div>`
             : nothing}
+          ${this._date !== undefined
+            ? html`<div class="date ${sizeClass}">${this._date}</div>`
+            : nothing}
         </div>
       </div>
     `;
@@ -399,6 +424,36 @@ export class HuiClockCardAnalog extends LitElement {
       animation-timing-function: steps(60, end);
     }
 
+    .date {
+      position: absolute;
+      top: 50%;
+      right: 25%;
+      transform: translate(50%, -50%);
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-medium);
+      color: var(--primary-text-color);
+      opacity: 0.6;
+      z-index: 0;
+      pointer-events: none;
+      padding: 1px 3px;
+      border-radius: 2px;
+      box-shadow:
+        inset 0 1px 2px rgba(0, 0, 0, 0.15),
+        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
+    }
+
+    .date.size-medium {
+      font-size: var(--ha-font-size-l);
+      padding: 2px 4px;
+      border-radius: 2px;
+    }
+
+    .date.size-large {
+      font-size: var(--ha-font-size-xl);
+      padding: 2px 5px;
+      border-radius: 3px;
+    }
+
     @keyframes ha-clock-rotate {
       from {
         transform: translate(-50%, 0) rotate(0deg);

src/panels/lovelace/cards/clock/hui-clock-card-digital.ts

@@ -16,6 +16,8 @@ export class HuiClockCardDigital extends LitElement {
 
   @state() private _dateTimeFormat?: Intl.DateTimeFormat;
 
+  @state() private _dateFormat?: Intl.DateTimeFormat;
+
   @state() private _timeHour?: string;
 
   @state() private _timeMinute?: string;
@@ -24,6 +26,8 @@ export class HuiClockCardDigital extends LitElement {
 
   @state() private _timeAmPm?: string;
 
+  @state() private _date?: string;
+
   private _tickInterval?: undefined | number;
 
   private _initDate() {
@@ -48,6 +52,17 @@ export class HuiClockCardDigital extends LitElement {
         resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
     });
 
+    if (this.config?.date_format === "day") {
+      this._dateFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
+        day: "2-digit",
+        timeZone:
+          this.config?.time_zone ||
+          resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
+      });
+    } else {
+      this._dateFormat = undefined;
+    }
+
     this._tick();
   }
 
@@ -93,6 +108,13 @@ export class HuiClockCardDigital extends LitElement {
       ? parts.find((part) => part.type === "second")?.value
       : undefined;
     this._timeAmPm = parts.find((part) => part.type === "dayPeriod")?.value;
+
+    if (this._dateFormat) {
+      const dateParts = this._dateFormat.formatToParts();
+      this._date = dateParts.find((part) => part.type === "day")?.value;
+    } else {
+      this._date = undefined;
+    }
   }
 
   render() {
@@ -113,6 +135,9 @@ export class HuiClockCardDigital extends LitElement {
           ? html`<div class="time-part am-pm">${this._timeAmPm}</div>`
           : nothing}
       </div>
+      ${this._date !== undefined
+        ? html`<div class="date ${sizeClass}">${this._date}</div>`
+        : nothing}
     `;
   }
 
@@ -121,6 +146,26 @@ export class HuiClockCardDigital extends LitElement {
       display: block;
     }
 
+    .date {
+      font-size: var(--ha-font-size-m);
+      font-weight: var(--ha-font-weight-medium);
+      opacity: 0.6;
+      text-align: center;
+      direction: ltr;
+      margin-top: 4px;
+      align-self: center;
+    }
+
+    .date.size-medium {
+      font-size: var(--ha-font-size-l);
+      margin-top: 6px;
+    }
+
+    .date.size-large {
+      font-size: var(--ha-font-size-xl);
+      margin-top: 8px;
+    }
+
     .time-parts {
       align-items: center;
       display: grid;

src/panels/lovelace/cards/types.ts

@@ -381,6 +381,7 @@ export interface ClockCardConfig extends LovelaceCardConfig {
   seconds_motion?: "continuous" | "tick";
   time_format?: TimeFormat;
   time_zone?: string;
+  date_format?: "none" | "day";
   no_background?: boolean;
   // Analog clock options
   border?: boolean;

src/panels/lovelace/editor/config-elements/hui-clock-card-editor.ts

@@ -37,6 +37,9 @@ const cardConfigStruct = assign(
     ),
     time_format: optional(enums(Object.values(TimeFormat))),
     time_zone: optional(enums(Object.keys(timezones))),
+    date_format: optional(
+      defaulted(union([literal("none"), literal("day")]), literal("none"))
+    ),
     show_seconds: optional(boolean()),
     no_background: optional(boolean()),
     // Analog clock options
@@ -117,6 +120,20 @@ export class HuiClockCardEditor
             },
           },
         },
+        {
+          name: "date_format",
+          selector: {
+            select: {
+              mode: "dropdown",
+              options: ["none", "day"].map((value) => ({
+                value,
+                label: localize(
+                  `ui.panel.lovelace.editor.card.clock.date_formats.${value}`
+                ),
+              })),
+            },
+          },
+        },
         { name: "show_seconds", selector: { boolean: {} } },
         { name: "no_background", selector: { boolean: {} } },
         ...(clockStyle === "digital"
@@ -265,6 +282,7 @@ export class HuiClockCardEditor
     clock_size: "small",
     time_zone: "auto",
     time_format: "auto",
+    date_format: "none",
     show_seconds: false,
     no_background: false,
     // Analog clock options
@@ -359,6 +377,10 @@ export class HuiClockCardEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.time_zone`
         );
+      case "date_format":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.clock.date_format`
+        );
       case "show_seconds":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.show_seconds`

src/translations/en.json

@@ -7809,6 +7809,11 @@
               "time_zones": {
                 "auto": "Use user settings"
               },
+              "date_format": "Date format",
+              "date_formats": {
+                "none": "None",
+                "day": "Day"
+              },
               "no_background": "No background",
               "border": {
                 "label": "Border",