Format

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

src/components/ha-clock-date-format-picker.ts

@@ -0,0 +1,522 @@
+import { mdiDragHorizontalVariant, mdiPlus } from "@mdi/js";
+import { css, html, LitElement, nothing } from "lit";
+import { customElement, property, query } from "lit/decorators";
+import { repeat } from "lit/directives/repeat";
+import memoizeOne from "memoize-one";
+import { ensureArray } from "../common/array/ensure-array";
+import { resolveTimeZone } from "../common/datetime/resolve-time-zone";
+import { fireEvent } from "../common/dom/fire_event";
+import {
+  CLOCK_CARD_DATE_PARTS,
+  formatClockCardDate,
+} from "../panels/lovelace/cards/clock/clock-date-format";
+import type { ClockCardDatePart } from "../panels/lovelace/cards/types";
+import type { HomeAssistant, ValueChangedEvent } from "../types";
+import "./chips/ha-assist-chip";
+import "./chips/ha-chip-set";
+import "./chips/ha-input-chip";
+import "./ha-generic-picker";
+import type { HaGenericPicker } from "./ha-generic-picker";
+import "./ha-input-helper-text";
+import type { PickerComboBoxItem } from "./ha-picker-combo-box";
+import "./ha-sortable";
+
+type ClockDatePartSection = "weekday" | "day" | "month" | "year" | "separator";
+
+type ClockDateSeparatorPart = Extract<
+  ClockCardDatePart,
+  "separator-dash" | "separator-slash" | "separator-dot" | "separator-new-line"
+>;
+
+const CLOCK_DATE_PART_SECTION_ORDER: readonly ClockDatePartSection[] = [
+  "day",
+  "month",
+  "year",
+  "weekday",
+  "separator",
+];
+
+const CLOCK_DATE_SEPARATOR_VALUES: Record<ClockDateSeparatorPart, string> = {
+  "separator-dash": "-",
+  "separator-slash": "/",
+  "separator-dot": ".",
+  "separator-new-line": "",
+};
+
+const getClockDatePartSection = (
+  part: ClockCardDatePart
+): ClockDatePartSection => {
+  if (part.startsWith("weekday-")) {
+    return "weekday";
+  }
+
+  if (part.startsWith("day-")) {
+    return "day";
+  }
+
+  if (part.startsWith("month-")) {
+    return "month";
+  }
+
+  if (part.startsWith("year-")) {
+    return "year";
+  }
+
+  return "separator";
+};
+
+interface ClockDatePartSectionData {
+  id: ClockDatePartSection;
+  title: string;
+  items: PickerComboBoxItem[];
+}
+
+interface ClockDatePartValueItem {
+  key: string;
+  item: string;
+  idx: number;
+}
+
+@customElement("ha-clock-date-format-picker")
+export class HaClockDateFormatPicker extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ type: Boolean, reflect: true }) public disabled = false;
+
+  @property({ type: Boolean }) public required = false;
+
+  @property() public label?: string;
+
+  @property() public value?: string[] | string;
+
+  @property() public helper?: string;
+
+  @query("ha-generic-picker", true) private _picker?: HaGenericPicker;
+
+  private _editIndex?: number;
+
+  protected render() {
+    const value = this._value;
+    const valueItems = this._getValueItems(value);
+
+    return html`
+      ${this.label ? html`<label>${this.label}</label>` : nothing}
+      <ha-generic-picker
+        .hass=${this.hass}
+        .disabled=${this.disabled}
+        .required=${this.required && !value.length}
+        .value=${this._getPickerValue()}
+        .sections=${this._getSections(this.hass.locale.language)}
+        .getItems=${this._getItems}
+        @value-changed=${this._pickerValueChanged}
+      >
+        <div slot="field" class="container">
+          <ha-sortable
+            no-style
+            @item-moved=${this._moveItem}
+            .disabled=${this.disabled}
+            handle-selector="button.primary.action"
+            filter=".add"
+          >
+            <ha-chip-set>
+              ${repeat(
+                valueItems,
+                (entry: ClockDatePartValueItem) => entry.key,
+                ({ item, idx }) => this._renderValueChip(item, idx)
+              )}
+              ${this.disabled
+                ? nothing
+                : html`
+                    <ha-assist-chip
+                      @click=${this._addItem}
+                      .disabled=${this.disabled}
+                      label=${this.hass.localize("ui.common.add")}
+                      class="add"
+                    >
+                      <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+                    </ha-assist-chip>
+                  `}
+            </ha-chip-set>
+          </ha-sortable>
+        </div>
+      </ha-generic-picker>
+      ${this._renderHelper()}
+    `;
+  }
+
+  private _renderHelper() {
+    return this.helper
+      ? html`
+          <ha-input-helper-text .disabled=${this.disabled}>
+            ${this.helper}
+          </ha-input-helper-text>
+        `
+      : nothing;
+  }
+
+  private _getValueItems = memoizeOne(
+    (value: string[]): ClockDatePartValueItem[] => {
+      const occurrences = new Map<string, number>();
+
+      return value.map((item, idx) => {
+        const occurrence = occurrences.get(item) ?? 0;
+        occurrences.set(item, occurrence + 1);
+
+        return {
+          key: `${item}:${occurrence}`,
+          item,
+          idx,
+        };
+      });
+    }
+  );
+
+  private _renderValueChip(item: string, idx: number) {
+    const label = this._getItemLabel(item, this.hass.locale.language);
+    const isValid = !!label;
+
+    return html`
+      <ha-input-chip
+        data-idx=${idx}
+        @remove=${this._removeItem}
+        @click=${this._editItem}
+        .label=${label ?? item}
+        .selected=${!this.disabled}
+        .disabled=${this.disabled}
+        class=${!isValid ? "invalid" : ""}
+      >
+        <ha-svg-icon
+          slot="icon"
+          .path=${mdiDragHorizontalVariant}
+        ></ha-svg-icon>
+      </ha-input-chip>
+    `;
+  }
+
+  private async _addItem(ev: Event) {
+    ev.stopPropagation();
+
+    if (this.disabled) {
+      return;
+    }
+
+    this._editIndex = undefined;
+    await this.updateComplete;
+    await this._picker?.open();
+  }
+
+  private async _editItem(ev: Event) {
+    ev.stopPropagation();
+
+    if (this.disabled) {
+      return;
+    }
+
+    const idx = parseInt(
+      (ev.currentTarget as HTMLElement).dataset.idx ?? "",
+      10
+    );
+    this._editIndex = idx;
+    await this.updateComplete;
+    await this._picker?.open();
+  }
+
+  private get _value() {
+    return !this.value ? [] : ensureArray(this.value);
+  }
+
+  private _toValue = memoizeOne((value: string[]): string[] | undefined =>
+    value.length === 0 ? undefined : value
+  );
+
+  private _buildSections = memoizeOne(
+    (language: string): ClockDatePartSectionData[] => {
+      const itemsBySection: Record<ClockDatePartSection, PickerComboBoxItem[]> =
+        {
+          weekday: [],
+          day: [],
+          month: [],
+          year: [],
+          separator: [],
+        };
+
+      const previewDate = new Date();
+      const previewTimeZone = resolveTimeZone(
+        this.hass.locale.time_zone,
+        this.hass.config.time_zone
+      );
+
+      CLOCK_CARD_DATE_PARTS.forEach((part) => {
+        const section = getClockDatePartSection(part);
+        const label =
+          this.hass.localize(
+            `ui.panel.lovelace.editor.card.clock.date.parts.${part}`
+          ) ?? part;
+
+        const secondary =
+          section === "separator"
+            ? CLOCK_DATE_SEPARATOR_VALUES[part as ClockDateSeparatorPart]
+            : formatClockCardDate(
+                previewDate,
+                { parts: [part] },
+                language,
+                previewTimeZone
+              );
+
+        itemsBySection[section].push({
+          id: part,
+          primary: label,
+          secondary,
+          sorting_label: label,
+        });
+      });
+
+      return CLOCK_DATE_PART_SECTION_ORDER.map((section) => ({
+        id: section,
+        title:
+          this.hass.localize(
+            `ui.panel.lovelace.editor.card.clock.date.sections.${section}`
+          ) ?? section,
+        items: itemsBySection[section],
+      })).filter((section) => section.items.length > 0);
+    }
+  );
+
+  private _getSections = memoizeOne(
+    (_language: string): { id: string; label: string }[] =>
+      this._buildSections(_language).map((section) => ({
+        id: section.id,
+        label: section.title,
+      }))
+  );
+
+  private _getItems = (
+    searchString?: string,
+    section?: string
+  ): (PickerComboBoxItem | string)[] => {
+    const normalizedSearch = searchString?.trim().toLowerCase();
+
+    const sections = this._buildSections(this.hass.locale.language)
+      .map((sectionData) => {
+        if (!normalizedSearch) {
+          return sectionData;
+        }
+
+        return {
+          ...sectionData,
+          items: sectionData.items.filter(
+            (item) =>
+              item.primary.toLowerCase().includes(normalizedSearch) ||
+              item.secondary?.toLowerCase().includes(normalizedSearch) ||
+              item.id.toLowerCase().includes(normalizedSearch)
+          ),
+        };
+      })
+      .filter((sectionData) => sectionData.items.length > 0);
+
+    if (section) {
+      return (
+        sections.find((candidate) => candidate.id === section)?.items || []
+      );
+    }
+
+    const groupedItems: (PickerComboBoxItem | string)[] = [];
+
+    sections.forEach((sectionData) => {
+      groupedItems.push(sectionData.title, ...sectionData.items);
+    });
+
+    return groupedItems;
+  };
+
+  private _getItemLabel = memoizeOne(
+    (value: string, language: string): string | undefined => {
+      const sections = this._buildSections(language);
+
+      for (const section of sections) {
+        const item = section.items.find((candidate) => candidate.id === value);
+
+        if (item) {
+          if (section.id === "separator") {
+            if (value === "separator-new-line") {
+              return item.primary;
+            }
+
+            return item.secondary ?? item.primary;
+          }
+
+          return `${item.secondary} [${item.primary} ${section.title}]`;
+        }
+      }
+
+      return undefined;
+    }
+  );
+
+  private _getPickerValue(): string | undefined {
+    if (this._editIndex != null) {
+      return this._value[this._editIndex];
+    }
+
+    return undefined;
+  }
+
+  private async _moveItem(ev: CustomEvent) {
+    ev.stopPropagation();
+    const { oldIndex, newIndex } = ev.detail;
+
+    const value = this._value;
+    const newValue = value.concat();
+    const element = newValue.splice(oldIndex, 1)[0];
+    newValue.splice(newIndex, 0, element);
+
+    this._setValue(newValue);
+  }
+
+  private async _removeItem(ev: Event) {
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    const idx = parseInt(
+      (ev.currentTarget as HTMLElement).dataset.idx ?? "",
+      10
+    );
+
+    if (Number.isNaN(idx)) {
+      return;
+    }
+
+    const value = [...this._value];
+    value.splice(idx, 1);
+
+    if (this._editIndex !== undefined) {
+      if (this._editIndex === idx) {
+        this._editIndex = undefined;
+      } else if (this._editIndex > idx) {
+        this._editIndex -= 1;
+      }
+    }
+
+    this._setValue(value);
+  }
+
+  private _pickerValueChanged(ev: ValueChangedEvent<string>): void {
+    ev.stopPropagation();
+    const value = ev.detail.value;
+
+    if (this.disabled || !value) {
+      return;
+    }
+
+    const newValue = [...this._value];
+
+    if (this._editIndex != null) {
+      newValue[this._editIndex] = value;
+      this._editIndex = undefined;
+    } else {
+      newValue.push(value);
+    }
+
+    this._setValue(newValue);
+
+    if (this._picker) {
+      this._picker.value = undefined;
+    }
+  }
+
+  private _setValue(value: string[]) {
+    const newValue = this._toValue(value);
+    this.value = newValue;
+
+    fireEvent(this, "value-changed", {
+      value: newValue,
+    });
+  }
+
+  static styles = css`
+    :host {
+      position: relative;
+      width: 100%;
+    }
+
+    .container {
+      position: relative;
+      background-color: var(--mdc-text-field-fill-color, whitesmoke);
+      border-radius: var(--ha-border-radius-sm);
+      border-end-end-radius: var(--ha-border-radius-square);
+      border-end-start-radius: var(--ha-border-radius-square);
+    }
+
+    .container:after {
+      display: block;
+      content: "";
+      position: absolute;
+      pointer-events: none;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      width: 100%;
+      background-color: var(
+        --mdc-text-field-idle-line-color,
+        rgba(0, 0, 0, 0.42)
+      );
+      transition:
+        height 180ms ease-in-out,
+        background-color 180ms ease-in-out;
+    }
+
+    :host([disabled]) .container:after {
+      background-color: var(
+        --mdc-text-field-disabled-line-color,
+        rgba(0, 0, 0, 0.42)
+      );
+    }
+
+    .container:focus-within:after {
+      height: 2px;
+      background-color: var(--mdc-theme-primary);
+    }
+
+    label {
+      display: block;
+      margin: 0 0 var(--ha-space-2);
+    }
+
+    .add {
+      order: 1;
+    }
+
+    ha-chip-set {
+      padding: var(--ha-space-2);
+    }
+
+    .invalid {
+      text-decoration: line-through;
+    }
+
+    .sortable-fallback {
+      display: none;
+      opacity: 0;
+    }
+
+    .sortable-ghost {
+      opacity: 0.4;
+    }
+
+    .sortable-drag {
+      cursor: grabbing;
+    }
+
+    ha-input-helper-text {
+      display: block;
+      margin: var(--ha-space-2) 0 0;
+    }
+  `;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-clock-date-format-picker": HaClockDateFormatPicker;
+  }
+}

src/components/ha-selector/ha-selector-ui-clock-date-format.ts

@@ -0,0 +1,41 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators";
+import type { UiClockDateFormatSelector } from "../../data/selector";
+import type { HomeAssistant } from "../../types";
+import "../ha-clock-date-format-picker";
+
+@customElement("ha-selector-ui_clock_date_format")
+export class HaSelectorUiClockDateFormat extends LitElement {
+  @property({ attribute: false }) public hass!: HomeAssistant;
+
+  @property({ attribute: false }) public selector!: UiClockDateFormatSelector;
+
+  @property() public value?: string | string[];
+
+  @property() public label?: string;
+
+  @property() public helper?: string;
+
+  @property({ type: Boolean }) public disabled = false;
+
+  @property({ type: Boolean }) public required = true;
+
+  protected render() {
+    return html`
+      <ha-clock-date-format-picker
+        .hass=${this.hass}
+        .value=${this.value}
+        .label=${this.label}
+        .helper=${this.helper}
+        .disabled=${this.disabled}
+        .required=${this.required}
+      ></ha-clock-date-format-picker>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-selector-ui_clock_date_format": HaSelectorUiClockDateFormat;
+  }
+}

src/components/ha-selector/ha-selector.ts

@@ -61,6 +61,7 @@ const LOAD_ELEMENTS = {
   location: () => import("./ha-selector-location"),
   color_temp: () => import("./ha-selector-color-temp"),
   ui_action: () => import("./ha-selector-ui-action"),
+  ui_clock_date_format: () => import("./ha-selector-ui-clock-date-format"),
   ui_color: () => import("./ha-selector-ui-color"),
   ui_state_content: () => import("./ha-selector-ui-state-content"),
 };

src/data/selector.ts

@@ -74,6 +74,7 @@ export type Selector =
   | TTSSelector
   | TTSVoiceSelector
   | UiActionSelector
+  | UiClockDateFormatSelector
   | UiColorSelector
   | UiStateContentSelector
   | BackupLocationSelector;
@@ -505,6 +506,10 @@ export interface UiActionSelector {
   } | null;
 }
 
+export interface UiClockDateFormatSelector {
+  ui_clock_date_format: {} | null;
+}
+
 export interface UiColorSelector {
   ui_color: {
     default_color?: string;

src/panels/lovelace/cards/clock/clock-date-format.ts

@@ -0,0 +1,221 @@
+import type { ClockCardConfig, ClockCardDatePart } from "../types";
+
+type ClockCardSeparatorPart = Extract<
+  ClockCardDatePart,
+  "separator-dash" | "separator-slash" | "separator-dot" | "separator-new-line"
+>;
+
+type ClockCardValuePart = Exclude<ClockCardDatePart, ClockCardSeparatorPart>;
+
+/**
+ * Normalized date configuration used by clock card renderers.
+ */
+export interface ClockCardDateConfig {
+  parts: ClockCardDatePart[];
+}
+
+/**
+ * All selectable date tokens exposed by the clock card editor.
+ */
+export const CLOCK_CARD_DATE_PARTS: readonly ClockCardDatePart[] = [
+  "weekday-short",
+  "weekday-long",
+  "day-numeric",
+  "day-2-digit",
+  "month-short",
+  "month-long",
+  "month-numeric",
+  "month-2-digit",
+  "year-2-digit",
+  "year-numeric",
+  "separator-dash",
+  "separator-slash",
+  "separator-dot",
+  "separator-new-line",
+];
+
+const DATE_PART_OPTIONS: Record<
+  ClockCardValuePart,
+  Pick<Intl.DateTimeFormatOptions, "weekday" | "day" | "month" | "year">
+> = {
+  "weekday-short": { weekday: "short" },
+  "weekday-long": { weekday: "long" },
+  "day-numeric": { day: "numeric" },
+  "day-2-digit": { day: "2-digit" },
+  "month-short": { month: "short" },
+  "month-long": { month: "long" },
+  "month-numeric": { month: "numeric" },
+  "month-2-digit": { month: "2-digit" },
+  "year-2-digit": { year: "2-digit" },
+  "year-numeric": { year: "numeric" },
+};
+
+const DATE_SEPARATORS: Record<ClockCardSeparatorPart, string> = {
+  "separator-dash": "-",
+  "separator-slash": "/",
+  "separator-dot": ".",
+  "separator-new-line": "\n",
+};
+
+const DATE_SEPARATOR_PARTS = new Set<ClockCardSeparatorPart>([
+  "separator-dash",
+  "separator-slash",
+  "separator-dot",
+  "separator-new-line",
+]);
+
+const DATE_PART_FORMATTERS = new Map<string, Intl.DateTimeFormat>();
+
+const isClockCardDatePart = (value: string): value is ClockCardDatePart =>
+  CLOCK_CARD_DATE_PARTS.includes(value as ClockCardDatePart);
+
+const isDateSeparatorPart = (
+  part: ClockCardDatePart
+): part is ClockCardSeparatorPart =>
+  DATE_SEPARATOR_PARTS.has(part as ClockCardSeparatorPart);
+
+/**
+ * Returns a reusable formatter for a specific date token.
+ */
+const getDatePartFormatter = (
+  part: ClockCardValuePart,
+  language: string,
+  timeZone?: string
+): Intl.DateTimeFormat => {
+  const cacheKey = `${language}|${timeZone || ""}|${part}`;
+  const cached = DATE_PART_FORMATTERS.get(cacheKey);
+
+  if (cached) {
+    return cached;
+  }
+
+  const formatter = new Intl.DateTimeFormat(language, {
+    ...DATE_PART_OPTIONS[part],
+    ...(timeZone ? { timeZone } : {}),
+  });
+
+  DATE_PART_FORMATTERS.set(cacheKey, formatter);
+
+  return formatter;
+};
+
+const formatDatePart = (
+  part: ClockCardValuePart,
+  date: Date,
+  language: string,
+  timeZone?: string
+) => getDatePartFormatter(part, language, timeZone).format(date);
+
+/**
+ * Applies a single date token to Intl.DateTimeFormat options.
+ */
+const applyDatePartOption = (
+  options: Intl.DateTimeFormatOptions,
+  part: ClockCardDatePart
+) => {
+  if (isDateSeparatorPart(part)) {
+    return;
+  }
+
+  const partOptions = DATE_PART_OPTIONS[part];
+
+  if (partOptions.weekday) {
+    options.weekday = partOptions.weekday;
+  }
+
+  if (partOptions.day) {
+    options.day = partOptions.day;
+  }
+
+  if (partOptions.month) {
+    options.month = partOptions.month;
+  }
+
+  if (partOptions.year) {
+    options.year = partOptions.year;
+  }
+};
+
+/**
+ * Sanitizes configured date tokens while preserving their literal order.
+ */
+const normalizeDateParts = (
+  parts: ClockCardConfig["date_format"]
+): ClockCardDatePart[] =>
+  parts?.filter((part): part is ClockCardDatePart =>
+    isClockCardDatePart(part)
+  ) || [];
+
+/**
+ * Returns a normalized date config from a card configuration object.
+ */
+export const getClockCardDateConfig = (
+  config?: Pick<ClockCardConfig, "date_format">
+): ClockCardDateConfig => ({
+  parts: normalizeDateParts(config?.date_format),
+});
+
+/**
+ * Checks whether the clock configuration resolves to any visible date output.
+ */
+export const hasClockCardDate = (
+  config?: Pick<ClockCardConfig, "date_format">
+): boolean => getClockCardDateConfig(config).parts.length > 0;
+
+/**
+ * Converts normalized date tokens into Intl.DateTimeFormat options.
+ *
+ * Separator tokens are ignored. If multiple tokens target the same Intl field,
+ * the last one wins.
+ */
+export const getClockCardDateTimeFormatOptions = (
+  dateConfig: ClockCardDateConfig
+): Intl.DateTimeFormatOptions => {
+  const options: Intl.DateTimeFormatOptions = {};
+
+  dateConfig.parts.forEach((part) => {
+    applyDatePartOption(options, part);
+  });
+
+  return options;
+};
+
+/**
+ * Builds the final date string from literal date tokens.
+ *
+ * Value tokens are localized through Intl.DateTimeFormat. Separator tokens are
+ * always rendered literally. A default space is only inserted between adjacent
+ * value tokens.
+ */
+export const formatClockCardDate = (
+  date: Date,
+  dateConfig: ClockCardDateConfig,
+  language: string,
+  timeZone?: string
+): string => {
+  let result = "";
+  let previousRenderedPartWasValue = false;
+
+  dateConfig.parts.forEach((part) => {
+    if (isDateSeparatorPart(part)) {
+      result += DATE_SEPARATORS[part];
+      previousRenderedPartWasValue = false;
+      return;
+    }
+
+    const value = formatDatePart(part, date, language, timeZone);
+
+    if (!value) {
+      return;
+    }
+
+    if (previousRenderedPartWasValue) {
+      result += " ";
+    }
+
+    result += value;
+    previousRenderedPartWasValue = true;
+  });
+
+  return result;
+};

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

@@ -2,9 +2,16 @@ import type { PropertyValues } from "lit";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { styleMap } from "lit/directives/style-map";
+import memoizeOne from "memoize-one";
 import { resolveTimeZone } from "../../../../common/datetime/resolve-time-zone";
 import type { HomeAssistant } from "../../../../types";
 import type { ClockCardConfig } from "../types";
+import {
+  formatClockCardDate,
+  getClockCardDateConfig,
+  hasClockCardDate,
+} from "./clock-date-format";
 
 function romanize12HourClock(num: number) {
   const numerals = [
@@ -26,6 +33,11 @@ function romanize12HourClock(num: number) {
   return numerals[num];
 }
 
+const DATE_UPDATE_INTERVAL = 60_000;
+const QUARTER_TICKS = Array.from({ length: 4 }, (_, i) => i);
+const HOUR_TICKS = Array.from({ length: 12 }, (_, i) => i);
+const MINUTE_TICKS = Array.from({ length: 60 }, (_, i) => i);
+
 @customElement("hui-clock-card-analog")
 export class HuiClockCardAnalog extends LitElement {
   @property({ attribute: false }) public hass?: HomeAssistant;
@@ -40,42 +52,18 @@ export class HuiClockCardAnalog extends LitElement {
 
   @state() private _secondOffsetSec?: number;
 
-  private _initDate() {
-    if (!this.config || !this.hass) {
-      return;
-    }
+  @state() private _date?: string;
 
-    let locale = this.hass.locale;
-    if (this.config.time_format) {
-      locale = { ...locale, time_format: this.config.time_format };
-    }
+  private _dateInterval?: number;
 
-    this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
-      hour: "2-digit",
-      minute: "2-digit",
-      second: "2-digit",
-      hourCycle: "h12",
-      timeZone:
-        this.config.time_zone ||
-        resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
-    });
+  private _timeZone?: string;
 
-    this._computeOffsets();
-  }
-
-  protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("hass")) {
-      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
-      if (!oldHass || oldHass.locale !== this.hass?.locale) {
-        this._initDate();
-      }
-    }
-  }
+  private _language?: string;
 
   public connectedCallback() {
     super.connectedCallback();
     document.addEventListener("visibilitychange", this._handleVisibilityChange);
-    this._computeOffsets();
+    this._initDate();
   }
 
   public disconnectedCallback() {
@@ -84,18 +72,87 @@ export class HuiClockCardAnalog extends LitElement {
       "visibilitychange",
       this._handleVisibilityChange
     );
+    this._stopDateTick();
+  }
+
+  protected updated(changedProps: PropertyValues) {
+    if (changedProps.has("config") || changedProps.has("hass")) {
+      const oldHass = changedProps.get("hass") as HomeAssistant | undefined;
+      if (
+        changedProps.has("config") ||
+        !oldHass ||
+        oldHass.locale !== this.hass?.locale
+      ) {
+        this._initDate();
+      }
+    }
   }
 
   private _handleVisibilityChange = () => {
     if (!document.hidden) {
       this._computeOffsets();
+      this._updateDate();
     }
   };
 
+  private _initDate() {
+    if (!this.config || !this.hass) {
+      this._stopDateTick();
+      this._date = undefined;
+      return;
+    }
+
+    let locale = this.hass.locale;
+    if (this.config.time_format) {
+      locale = { ...locale, time_format: this.config.time_format };
+    }
+
+    const timeZone =
+      this.config.time_zone ||
+      resolveTimeZone(locale.time_zone, this.hass.config?.time_zone);
+
+    this._language = this.hass.locale.language;
+    this._timeZone = timeZone;
+
+    this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hourCycle: "h12",
+      timeZone,
+    });
+
+    this._computeOffsets();
+    this._updateDate();
+
+    if (this.isConnected && hasClockCardDate(this.config)) {
+      this._startDateTick();
+    } else {
+      this._stopDateTick();
+    }
+  }
+
+  private _startDateTick() {
+    this._stopDateTick();
+    this._dateInterval = window.setInterval(
+      () => this._updateDate(),
+      DATE_UPDATE_INTERVAL
+    );
+  }
+
+  private _stopDateTick() {
+    if (this._dateInterval) {
+      clearInterval(this._dateInterval);
+      this._dateInterval = undefined;
+    }
+  }
+
   private _computeOffsets() {
     if (!this._dateTimeFormat) return;
 
-    const parts = this._dateTimeFormat.formatToParts();
+    const date = new Date();
+
+    const parts = this._dateTimeFormat.formatToParts(date);
     const hourStr = parts.find((p) => p.type === "hour")?.value;
     const minuteStr = parts.find((p) => p.type === "minute")?.value;
     const secondStr = parts.find((p) => p.type === "second")?.value;
@@ -103,7 +160,7 @@ export class HuiClockCardAnalog extends LitElement {
     const hour = hourStr ? parseInt(hourStr, 10) : 0;
     const minute = minuteStr ? parseInt(minuteStr, 10) : 0;
     const second = secondStr ? parseInt(secondStr, 10) : 0;
-    const ms = new Date().getMilliseconds();
+    const ms = date.getMilliseconds();
     const secondsWithMs = second + ms / 1000;
 
     const hour12 = hour % 12;
@@ -113,16 +170,44 @@ export class HuiClockCardAnalog extends LitElement {
     this._hourOffsetSec = hour12 * 3600 + minute * 60 + secondsWithMs;
   }
 
+  private _updateDate() {
+    if (!this.config || !hasClockCardDate(this.config) || !this._language) {
+      this._date = undefined;
+      return;
+    }
+
+    const dateConfig = getClockCardDateConfig(this.config);
+    this._date = formatClockCardDate(
+      new Date(),
+      dateConfig,
+      this._language,
+      this._timeZone
+    );
+  }
+
+  private _computeClock = memoizeOne((config: ClockCardConfig) => {
+    const faceParts = config.face_style?.split("_");
+    const dateConfig = getClockCardDateConfig(config);
+    const showDate = hasClockCardDate(config);
+    const isLongDate =
+      dateConfig.parts.includes("month-long") ||
+      dateConfig.parts.includes("weekday-long");
+
+    return {
+      sizeClass: config.clock_size ? `size-${config.clock_size}` : "",
+      isNumbers: faceParts?.includes("numbers") ?? false,
+      isRoman: faceParts?.includes("roman") ?? false,
+      isUpright: faceParts?.includes("upright") ?? false,
+      showDate,
+      isLongDate,
+    };
+  });
+
   render() {
     if (!this.config) return nothing;
 
-    const sizeClass = this.config.clock_size
-      ? `size-${this.config.clock_size}`
-      : "";
-
-    const isNumbers = this.config?.face_style?.startsWith("numbers");
-    const isRoman = this.config?.face_style?.startsWith("roman");
-    const isUpright = this.config?.face_style?.endsWith("upright");
+    const { sizeClass, isNumbers, isRoman, isUpright, isLongDate, showDate } =
+      this._computeClock(this.config);
 
     const indicator = (number?: number) => html`
       <div
@@ -163,14 +248,14 @@ export class HuiClockCardAnalog extends LitElement {
           })}
         >
           ${this.config.ticks === "quarter"
-            ? Array.from({ length: 4 }, (_, i) => i).map(
+            ? QUARTER_TICKS.map(
                 (i) =>
                   // 4 ticks (12, 3, 6, 9) at 0°, 90°, 180°, 270°
                   html`
                     <div
                       aria-hidden="true"
                       class="tick hour"
-                      style=${`--tick-rotation: ${i * 90}deg;`}
+                      style=${styleMap({ "--tick-rotation": `${i * 90}deg` })}
                     >
                       ${indicator([12, 3, 6, 9][i])}
                     </div>
@@ -178,28 +263,30 @@ export class HuiClockCardAnalog extends LitElement {
               )
             : !this.config.ticks || // Default to hour ticks
                 this.config.ticks === "hour"
-              ? Array.from({ length: 12 }, (_, i) => i).map(
+              ? HOUR_TICKS.map(
                   (i) =>
                     // 12 ticks (1-12)
                     html`
                       <div
                         aria-hidden="true"
                         class="tick hour"
-                        style=${`--tick-rotation: ${i * 30}deg;`}
+                        style=${styleMap({ "--tick-rotation": `${i * 30}deg` })}
                       >
                         ${indicator(((i + 11) % 12) + 1)}
                       </div>
                     `
                 )
               : this.config.ticks === "minute"
-                ? Array.from({ length: 60 }, (_, i) => i).map(
+                ? MINUTE_TICKS.map(
                     (i) =>
                       // 60 ticks (1-60)
                       html`
                         <div
                           aria-hidden="true"
                           class="tick ${i % 5 === 0 ? "hour" : "minute"}"
-                          style=${`--tick-rotation: ${i * 6}deg;`}
+                          style=${styleMap({
+                            "--tick-rotation": `${i * 6}deg`,
+                          })}
                         >
                           ${i % 5 === 0
                             ? indicator(((i / 5 + 11) % 12) + 1)
@@ -208,14 +295,34 @@ export class HuiClockCardAnalog extends LitElement {
                       `
                   )
                 : nothing}
+          ${showDate
+            ? html`<div
+                class=${classMap({
+                  date: true,
+                  [sizeClass]: true,
+                  "long-date": isLongDate,
+                })}
+              >
+                ${this._date
+                  ?.split("\n")
+                  .map((line, index) =>
+                    index > 0 ? html`<br />${line}` : line
+                  )}
+              </div>`
+            : nothing}
+
           <div class="center-dot"></div>
           <div
             class="hand hour"
-            style=${`animation-delay: -${this._hourOffsetSec ?? 0}s;`}
+            style=${styleMap({
+              "animation-delay": `-${this._hourOffsetSec ?? 0}s`,
+            })}
           ></div>
           <div
             class="hand minute"
-            style=${`animation-delay: -${this._minuteOffsetSec ?? 0}s;`}
+            style=${styleMap({
+              "animation-delay": `-${this._minuteOffsetSec ?? 0}s`,
+            })}
           ></div>
           ${this.config.show_seconds
             ? html`<div
@@ -224,11 +331,13 @@ export class HuiClockCardAnalog extends LitElement {
                   second: true,
                   step: this.config.seconds_motion === "tick",
                 })}
-                style=${`animation-delay: -${
-                  (this.config.seconds_motion === "tick"
-                    ? Math.floor(this._secondOffsetSec ?? 0)
-                    : (this._secondOffsetSec ?? 0)) as number
-                }s;`}
+                style=${styleMap({
+                  "animation-delay": `-${
+                    (this.config.seconds_motion === "tick"
+                      ? Math.floor(this._secondOffsetSec ?? 0)
+                      : (this._secondOffsetSec ?? 0)) as number
+                  }s`,
+                })}
               ></div>`
             : nothing}
         </div>
@@ -407,6 +516,36 @@ export class HuiClockCardAnalog extends LitElement {
         transform: translate(-50%, 0) rotate(360deg);
       }
     }
+
+    .date {
+      position: absolute;
+      top: 68%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: block;
+      color: var(--primary-text-color);
+      font-size: var(--ha-font-size-s);
+      font-weight: var(--ha-font-weight-medium);
+      line-height: var(--ha-line-height-condensed);
+      text-align: center;
+      opacity: 0.8;
+      max-width: 87%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .date.long-date:not(.size-medium):not(.size-large) {
+      font-size: var(--ha-font-size-xs);
+    }
+
+    .date.size-medium {
+      font-size: var(--ha-font-size-l);
+    }
+
+    .date.size-large {
+      font-size: var(--ha-font-size-xl);
+    }
   `;
 }
 

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

@@ -5,6 +5,11 @@ import type { ClockCardConfig } from "../types";
 import type { HomeAssistant } from "../../../../types";
 import { useAmPm } from "../../../../common/datetime/use_am_pm";
 import { resolveTimeZone } from "../../../../common/datetime/resolve-time-zone";
+import {
+  formatClockCardDate,
+  getClockCardDateConfig,
+  hasClockCardDate,
+} from "./clock-date-format";
 
 const INTERVAL = 1000;
 
@@ -24,10 +29,20 @@ export class HuiClockCardDigital extends LitElement {
 
   @state() private _timeAmPm?: string;
 
+  @state() private _date?: string;
+
   private _tickInterval?: undefined | number;
 
+  private _lastDateMinute?: string;
+
+  private _timeZone?: string;
+
+  private _language?: string;
+
   private _initDate() {
     if (!this.config || !this.hass) {
+      this._date = undefined;
+      this._lastDateMinute = undefined;
       return;
     }
 
@@ -37,24 +52,35 @@ export class HuiClockCardDigital extends LitElement {
       locale = { ...locale, time_format: this.config.time_format };
     }
 
+    const timeZone =
+      this.config?.time_zone ||
+      resolveTimeZone(locale.time_zone, this.hass.config?.time_zone);
+
     const h12 = useAmPm(locale);
+    this._language = this.hass.locale.language;
+    this._timeZone = timeZone;
+
     this._dateTimeFormat = new Intl.DateTimeFormat(this.hass.locale.language, {
       hour: h12 ? "numeric" : "2-digit",
       minute: "2-digit",
       second: "2-digit",
       hourCycle: h12 ? "h12" : "h23",
-      timeZone:
-        this.config?.time_zone ||
-        resolveTimeZone(locale.time_zone, this.hass.config?.time_zone),
+      timeZone,
     });
 
+    this._lastDateMinute = undefined;
+
     this._tick();
   }
 
   protected updated(changedProps: PropertyValues) {
-    if (changedProps.has("hass")) {
+    if (changedProps.has("config") || changedProps.has("hass")) {
       const oldHass = changedProps.get("hass");
-      if (!oldHass || oldHass.locale !== this.hass?.locale) {
+      if (
+        changedProps.has("config") ||
+        !oldHass ||
+        oldHass.locale !== this.hass?.locale
+      ) {
         this._initDate();
       }
     }
@@ -71,6 +97,7 @@ export class HuiClockCardDigital extends LitElement {
   }
 
   private _startTick() {
+    this._stopTick();
     this._tickInterval = window.setInterval(() => this._tick(), INTERVAL);
     this._tick();
   }
@@ -85,7 +112,8 @@ export class HuiClockCardDigital extends LitElement {
   private _tick() {
     if (!this._dateTimeFormat) return;
 
-    const parts = this._dateTimeFormat.formatToParts();
+    const date = new Date();
+    const parts = this._dateTimeFormat.formatToParts(date);
 
     this._timeHour = parts.find((part) => part.type === "hour")?.value;
     this._timeMinute = parts.find((part) => part.type === "minute")?.value;
@@ -93,6 +121,33 @@ export class HuiClockCardDigital extends LitElement {
       ? parts.find((part) => part.type === "second")?.value
       : undefined;
     this._timeAmPm = parts.find((part) => part.type === "dayPeriod")?.value;
+
+    this._updateDate(date);
+  }
+
+  private _updateDate(date: Date) {
+    if (!this.config || !hasClockCardDate(this.config) || !this._language) {
+      this._date = undefined;
+      this._lastDateMinute = undefined;
+      return;
+    }
+
+    if (
+      this._timeMinute !== undefined &&
+      this._timeMinute === this._lastDateMinute &&
+      this._date !== undefined
+    ) {
+      return;
+    }
+
+    const dateConfig = getClockCardDateConfig(this.config);
+    this._date = formatClockCardDate(
+      date,
+      dateConfig,
+      this._language,
+      this._timeZone
+    );
+    this._lastDateMinute = this._timeMinute;
   }
 
   render() {
@@ -101,18 +156,30 @@ export class HuiClockCardDigital extends LitElement {
     const sizeClass = this.config.clock_size
       ? `size-${this.config.clock_size}`
       : "";
+    const showDate = hasClockCardDate(this.config);
 
     return html`
-      <div class="time-parts ${sizeClass}">
-        <div class="time-part hour">${this._timeHour}</div>
-        <div class="time-part minute">${this._timeMinute}</div>
-        ${this._timeSecond !== undefined
-          ? html`<div class="time-part second">${this._timeSecond}</div>`
-          : nothing}
-        ${this._timeAmPm !== undefined
-          ? html`<div class="time-part am-pm">${this._timeAmPm}</div>`
-          : nothing}
+      <div class="clock-container">
+        <div class="time-parts ${sizeClass}">
+          <div class="time-part hour">${this._timeHour}</div>
+          <div class="time-part minute">${this._timeMinute}</div>
+          ${this._timeSecond !== undefined
+            ? html`<div class="time-part second">${this._timeSecond}</div>`
+            : nothing}
+          ${this._timeAmPm !== undefined
+            ? html`<div class="time-part am-pm">${this._timeAmPm}</div>`
+            : nothing}
+        </div>
       </div>
+      ${showDate
+        ? html`<div class="date-container">
+            <div class="date ${sizeClass}">
+              ${this._date
+                ?.split("\n")
+                .map((line, index) => (index > 0 ? html`<br />${line}` : line))}
+            </div>
+          </div>`
+        : nothing}
     `;
   }
 
@@ -121,6 +188,17 @@ export class HuiClockCardDigital extends LitElement {
       display: block;
     }
 
+    .clock-container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+
+    .date-container {
+      width: 100%;
+      margin-top: var(--ha-space-1);
+    }
+
     .time-parts {
       align-items: center;
       display: grid;
@@ -188,6 +266,21 @@ export class HuiClockCardDigital extends LitElement {
       content: ":";
       margin: 0 2px;
     }
+
+    .date {
+      text-align: center;
+      opacity: 0.8;
+      font-size: var(--ha-font-size-s);
+      line-height: 1.1;
+    }
+
+    .date.size-medium {
+      font-size: var(--ha-font-size-l);
+    }
+
+    .date.size-large {
+      font-size: var(--ha-font-size-2xl);
+    }
   `;
 }
 

src/panels/lovelace/cards/types.ts

@@ -451,12 +451,29 @@ export interface ClockCardConfig extends LovelaceCardConfig {
   time_format?: TimeFormat;
   time_zone?: string;
   no_background?: boolean;
+  date_format?: ClockCardDatePart[];
   // Analog clock options
   border?: boolean;
   ticks?: "none" | "quarter" | "hour" | "minute";
   face_style?: "markers" | "numbers_upright" | "roman";
 }
 
+export type ClockCardDatePart =
+  | "weekday-short"
+  | "weekday-long"
+  | "day-numeric"
+  | "day-2-digit"
+  | "month-short"
+  | "month-long"
+  | "month-numeric"
+  | "month-2-digit"
+  | "year-2-digit"
+  | "year-numeric"
+  | "separator-dash"
+  | "separator-slash"
+  | "separator-dot"
+  | "separator-new-line";
+
 export interface MediaControlCardConfig extends LovelaceCardConfig {
   entity: string;
   name?: string | EntityNameItem | EntityNameItem[];

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

@@ -3,16 +3,15 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import {
+  array,
   assert,
   assign,
   boolean,
   defaulted,
   enums,
-  literal,
   object,
   optional,
   string,
-  union,
 } from "superstruct";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-form/ha-form";
@@ -20,57 +19,46 @@ import type {
   HaFormSchema,
   SchemaUnion,
 } from "../../../../components/ha-form/types";
-import type { HomeAssistant } from "../../../../types";
+import type { HomeAssistant, ValueChangedEvent } from "../../../../types";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import type { ClockCardConfig } from "../../cards/types";
 import type { LovelaceCardEditor } from "../../types";
 import { baseLovelaceCardConfig } from "../structs/base-card-struct";
 import { TimeFormat } from "../../../../data/translation";
+import {
+  CLOCK_CARD_DATE_PARTS,
+  getClockCardDateConfig,
+} from "../../cards/clock/clock-date-format";
 
 const cardConfigStruct = assign(
   baseLovelaceCardConfig,
   object({
     title: optional(string()),
-    clock_style: optional(union([literal("digital"), literal("analog")])),
-    clock_size: optional(
-      union([literal("small"), literal("medium"), literal("large")])
-    ),
+    clock_style: optional(enums(["digital", "analog"])),
+    clock_size: optional(enums(["small", "medium", "large"])),
     time_format: optional(enums(Object.values(TimeFormat))),
     time_zone: optional(enums(Object.keys(timezones))),
     show_seconds: optional(boolean()),
     no_background: optional(boolean()),
+    date_format: optional(defaulted(array(enums(CLOCK_CARD_DATE_PARTS)), [])),
     // Analog clock options
     border: optional(defaulted(boolean(), false)),
     ticks: optional(
-      defaulted(
-        union([
-          literal("none"),
-          literal("quarter"),
-          literal("hour"),
-          literal("minute"),
-        ]),
-        literal("hour")
-      )
+      defaulted(enums(["none", "quarter", "hour", "minute"]), "hour")
     ),
     seconds_motion: optional(
-      defaulted(
-        union([literal("continuous"), literal("tick")]),
-        literal("continuous")
-      )
+      defaulted(enums(["continuous", "tick"]), "continuous")
     ),
     face_style: optional(
-      defaulted(
-        union([
-          literal("markers"),
-          literal("numbers_upright"),
-          literal("roman"),
-        ]),
-        literal("markers")
-      )
+      defaulted(enums(["markers", "numbers_upright", "roman"]), "markers")
     ),
   })
 );
 
+type ClockCardFormData = Omit<ClockCardConfig, "time_format"> & {
+  time_format?: ClockCardConfig["time_format"] | "auto";
+};
+
 @customElement("hui-clock-card-editor")
 export class HuiClockCardEditor
   extends LitElement
@@ -93,7 +81,7 @@ export class HuiClockCardEditor
           name: "clock_style",
           selector: {
             select: {
-              mode: "dropdown",
+              mode: "box",
               options: ["digital", "analog"].map((value) => ({
                 value,
                 label: localize(
@@ -119,6 +107,13 @@ export class HuiClockCardEditor
         },
         { name: "show_seconds", selector: { boolean: {} } },
         { name: "no_background", selector: { boolean: {} } },
+        {
+          name: "date_format",
+          required: false,
+          selector: {
+            ui_clock_date_format: {},
+          },
+        },
         ...(clockStyle === "digital"
           ? ([
               {
@@ -241,18 +236,28 @@ export class HuiClockCardEditor
       ] as const satisfies readonly HaFormSchema[]
   );
 
-  private _data = memoizeOne((config) => ({
-    clock_style: "digital",
-    clock_size: "small",
-    time_format: "auto",
-    show_seconds: false,
-    no_background: false,
-    // Analog clock options
-    border: false,
-    ticks: "hour",
-    face_style: "markers",
-    ...config,
-  }));
+  private _data = memoizeOne((config: ClockCardConfig): ClockCardFormData => {
+    const dateConfig = getClockCardDateConfig(config);
+
+    const data: ClockCardFormData = {
+      ...config,
+      clock_style: config.clock_style ?? "digital",
+      clock_size: config.clock_size ?? "small",
+      time_format: config.time_format ?? "auto",
+      show_seconds: config.show_seconds ?? false,
+      no_background: config.no_background ?? false,
+      // Analog clock options
+      border: config.border ?? false,
+      ticks: config.ticks ?? "hour",
+      face_style: config.face_style ?? "markers",
+    };
+
+    if (config.date_format === undefined) {
+      data.date_format = dateConfig.parts;
+    }
+
+    return data;
+  });
 
   public setConfig(config: ClockCardConfig): void {
     assert(config, cardConfigStruct);
@@ -270,8 +275,9 @@ export class HuiClockCardEditor
         .data=${this._data(this._config)}
         .schema=${this._schema(
           this.hass.localize,
-          this._data(this._config).clock_style,
-          this._data(this._config).ticks,
+          this._data(this._config)
+            .clock_style as ClockCardConfig["clock_style"],
+          this._data(this._config).ticks as ClockCardConfig["ticks"],
           this._data(this._config).show_seconds
         )}
         .computeLabel=${this._computeLabelCallback}
@@ -281,35 +287,40 @@ export class HuiClockCardEditor
     `;
   }
 
-  private _valueChanged(ev: CustomEvent): void {
-    if (ev.detail.value.time_format === "auto") {
-      delete ev.detail.value.time_format;
+  private _valueChanged(ev: ValueChangedEvent<ClockCardFormData>): void {
+    const config = ev.detail.value;
+
+    if (!config.date_format || config.date_format.length === 0) {
+      delete config.date_format;
     }
 
-    if (ev.detail.value.clock_style === "analog") {
-      ev.detail.value.border = ev.detail.value.border ?? false;
-      ev.detail.value.ticks = ev.detail.value.ticks ?? "hour";
-      ev.detail.value.face_style = ev.detail.value.face_style ?? "markers";
-      if (ev.detail.value.show_seconds) {
-        ev.detail.value.seconds_motion =
-          ev.detail.value.seconds_motion ?? "continuous";
+    if (config.time_format === "auto") {
+      delete config.time_format;
+    }
+
+    if (config.clock_style === "analog") {
+      config.border = config.border ?? false;
+      config.ticks = config.ticks ?? "hour";
+      config.face_style = config.face_style ?? "markers";
+      if (config.show_seconds) {
+        config.seconds_motion = config.seconds_motion ?? "continuous";
       } else {
-        delete ev.detail.value.seconds_motion;
+        delete config.seconds_motion;
       }
     } else {
-      delete ev.detail.value.border;
-      delete ev.detail.value.ticks;
-      delete ev.detail.value.face_style;
-      delete ev.detail.value.seconds_motion;
+      delete config.border;
+      delete config.ticks;
+      delete config.face_style;
+      delete config.seconds_motion;
     }
 
-    if (ev.detail.value.ticks !== "none") {
-      ev.detail.value.face_style = ev.detail.value.face_style ?? "markers";
+    if (config.ticks !== "none") {
+      config.face_style = config.face_style ?? "markers";
     } else {
-      delete ev.detail.value.face_style;
+      delete config.face_style;
     }
 
-    fireEvent(this, "config-changed", { config: ev.detail.value });
+    fireEvent(this, "config-changed", { config });
   }
 
   private _computeLabelCallback = (
@@ -344,6 +355,10 @@ export class HuiClockCardEditor
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.no_background`
         );
+      case "date_format":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.clock.date.label`
+        );
       case "border":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.border.label`
@@ -369,6 +384,10 @@ export class HuiClockCardEditor
     schema: SchemaUnion<ReturnType<typeof this._schema>>
   ) => {
     switch (schema.name) {
+      case "date_format":
+        return this.hass!.localize(
+          `ui.panel.lovelace.editor.card.clock.date.description`
+        );
       case "border":
         return this.hass!.localize(
           `ui.panel.lovelace.editor.card.clock.border.description`

src/translations/en.json

@@ -9090,6 +9090,33 @@
                 "large": "Large"
               },
               "show_seconds": "Display seconds",
+              "date": {
+                "label": "Date",
+                "description": "Select and order the date parts. Add a separator to control punctuation.",
+                "sections": {
+                  "weekday": "Weekday",
+                  "day": "Day",
+                  "month": "Month",
+                  "year": "Year",
+                  "separator": "Separator"
+                },
+                "parts": {
+                  "weekday-short": "Short",
+                  "weekday-long": "Long",
+                  "day-numeric": "Numeric",
+                  "day-2-digit": "2-digit",
+                  "month-short": "Short",
+                  "month-long": "Long",
+                  "month-numeric": "Numeric",
+                  "month-2-digit": "2-digit",
+                  "year-2-digit": "2-digit",
+                  "year-numeric": "Full",
+                  "separator-dash": "Dash",
+                  "separator-slash": "Slash",
+                  "separator-dot": "Dot",
+                  "separator-new-line": "New line"
+                }
+              },
               "time_format": "[%key:ui::panel::profile::time_format::dropdown_label%]",
               "time_formats": {
                 "auto": "Use user settings",

test/panels/lovelace/cards/clock-date-format.test.ts

@@ -0,0 +1,261 @@
+import { assert, describe, it } from "vitest";
+import type { ClockCardDatePart } from "../../../../src/panels/lovelace/cards/types";
+import {
+  formatClockCardDate,
+  getClockCardDateConfig,
+  getClockCardDateTimeFormatOptions,
+  hasClockCardDate,
+} from "../../../../src/panels/lovelace/cards/clock/clock-date-format";
+
+describe("clock-date-format", () => {
+  const date = new Date("2024-11-08T10:20:30.000Z");
+
+  it("returns an empty config when date format is missing", () => {
+    assert.deepEqual(getClockCardDateConfig(), { parts: [] });
+  });
+
+  it("preserves literal token order", () => {
+    const config = getClockCardDateConfig({
+      date_format: [
+        "day-numeric",
+        "separator-dot",
+        "month-short",
+        "month-long",
+        "separator-slash",
+        "year-2-digit",
+        "year-numeric",
+      ],
+    });
+
+    assert.deepEqual(config.parts, [
+      "day-numeric",
+      "separator-dot",
+      "month-short",
+      "month-long",
+      "separator-slash",
+      "year-2-digit",
+      "year-numeric",
+    ]);
+  });
+
+  it("filters invalid date tokens", () => {
+    const config = getClockCardDateConfig({
+      date_format: [
+        "month-short",
+        "invalid",
+        "year-2-digit",
+      ] as unknown as ClockCardDatePart[],
+    });
+
+    assert.deepEqual(config.parts, ["month-short", "year-2-digit"]);
+  });
+
+  it("builds Intl options from selected date tokens", () => {
+    const options = getClockCardDateTimeFormatOptions({
+      parts: [
+        "weekday-short",
+        "separator-slash",
+        "day-2-digit",
+        "month-long",
+        "month-numeric",
+        "year-2-digit",
+      ],
+    });
+
+    assert.deepEqual(options, {
+      weekday: "short",
+      day: "2-digit",
+      month: "numeric",
+      year: "2-digit",
+    });
+  });
+
+  it("reports whether any date part is configured", () => {
+    assert.equal(hasClockCardDate(), false);
+    assert.equal(hasClockCardDate({ date_format: [] }), false);
+    assert.equal(hasClockCardDate({ date_format: ["separator-dot"] }), true);
+    assert.equal(
+      hasClockCardDate({ date_format: ["separator-new-line"] }),
+      true
+    );
+    assert.equal(hasClockCardDate({ date_format: ["weekday-short"] }), true);
+  });
+
+  it("formats output in configured part order with literal separators", () => {
+    const result = formatClockCardDate(
+      date,
+      {
+        parts: [
+          "month-numeric",
+          "separator-slash",
+          "day-2-digit",
+          "separator-dash",
+          "year-2-digit",
+        ],
+      },
+      "en",
+      "UTC"
+    );
+
+    assert.equal(result, "11/08-24");
+  });
+
+  it("uses separator only for the next gap", () => {
+    const result = formatClockCardDate(
+      date,
+      {
+        parts: [
+          "day-numeric",
+          "separator-dot",
+          "month-numeric",
+          "year-numeric",
+        ],
+      },
+      "en",
+      "UTC"
+    );
+
+    assert.equal(result, "8.11 2024");
+  });
+
+  it("supports using the same separator style multiple times", () => {
+    const result = formatClockCardDate(
+      date,
+      {
+        parts: [
+          "month-numeric",
+          "separator-slash",
+          "day-2-digit",
+          "separator-slash",
+          "year-2-digit",
+        ],
+      },
+      "en",
+      "UTC"
+    );
+
+    assert.equal(result, "11/08/24");
+  });
+
+  it("renders separators even when no value follows", () => {
+    const result = formatClockCardDate(
+      date,
+      {
+        parts: ["day-numeric", "separator-dash", "separator-dot"],
+      },
+      "en",
+      "UTC"
+    );
+
+    assert.equal(result, "8-.");
+  });
+
+  it("renders separators even when no value precedes", () => {
+    const result = formatClockCardDate(
+      date,
+      {
+        parts: ["separator-slash", "separator-dot", "day-numeric"],
+      },
+      "en",
+      "UTC"
+    );
+
+    assert.equal(result, "/.8");
+  });
+
+  it("renders all consecutive separators between values", () => {
+    const result = formatClockCardDate(
+      date,
+      {
+        parts: [
+          "day-numeric",
+          "separator-dash",
+          "separator-slash",
+          "separator-dot",
+          "month-numeric",
+        ],
+      },
+      "en",
+      "UTC"
+    );
+
+    assert.equal(result, "8-/.11");
+  });
+
+  it("renders repeated separators without deduplication", () => {
+    const result = formatClockCardDate(
+      date,
+      {
+        parts: [
+          "day-numeric",
+          "separator-dash",
+          "separator-dash",
+          "separator-dash",
+          "month-numeric",
+        ],
+      },
+      "en",
+      "UTC"
+    );
+
+    assert.equal(result, "8---11");
+  });
+
+  it("renders separator-only configurations", () => {
+    const result = formatClockCardDate(
+      date,
+      {
+        parts: ["separator-dash", "separator-slash", "separator-dot"],
+      },
+      "en",
+      "UTC"
+    );
+
+    assert.equal(result, "-/.");
+  });
+
+  it("supports inserting a new line between date values", () => {
+    const result = formatClockCardDate(
+      date,
+      {
+        parts: [
+          "month-numeric",
+          "separator-new-line",
+          "day-2-digit",
+          "year-numeric",
+        ],
+      },
+      "en",
+      "UTC"
+    );
+
+    assert.equal(result, "11\n08 2024");
+  });
+
+  it("allows multiple variants for the same date part", () => {
+    const result = formatClockCardDate(
+      date,
+      {
+        parts: ["month-short", "month-long", "year-numeric"],
+      },
+      "en",
+      "UTC"
+    );
+
+    assert.equal(result, "Nov November 2024");
+  });
+
+  it("filters invalid tokens when formatting", () => {
+    const config = getClockCardDateConfig({
+      date_format: [
+        "month-numeric",
+        "invalid",
+        "year-numeric",
+      ] as unknown as ClockCardDatePart[],
+    });
+
+    const result = formatClockCardDate(date, config, "en", "UTC");
+
+    assert.equal(result, "11 2024");
+  });
+});