This component doesn't work in current (2023+) Home Assistant
Use something like this instead:
elements:
- entity: sensor.pretty_time
style:
color: var(--secondary-text-color)
font-size: 600%
left: 50%
top: 45%
type: state-label
- entity: sensor.pretty_date
style:
color: var(--primary-text-color)
font-size: 200%
left: 50%
top: 80%
type: state-label
image: >-
data:image/svg+xml,%3Csvg%20width%3D%22300%22%20height%3D%22130%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%2F%3E
Where pretty_time
and pretty_date
are template sensors something like this:
- name: "Pretty Time"
unique_id: pretty_time
state: "{{ now().strftime('%-H:%M %p') }}"
- sensor:
- name: "Pretty Date"
unique_id: pretty_date
state: "{{ now().strftime('%A, %B%e') }}"
See Really simple big clock for the inspiration.
Fork of Clock Card with small modifications to use plain Javascript date/time functions.
Should really take Locale as an input, but I was lazy.
- Install with HACS
- Add a Lovelace Resource
URL: /hacsfiles/scotte-clock-card/scotte-clock-card.js
type: module
- Add this to a manual card:
type: 'custom:scotte-clock-card'
- Profit!