Clock card?

is there a “clock card” for lovelace?
a nice big “clock card”?


Take a look here:

I made a background image in the color of my cards and used it

              - type: picture-elements    
                image: /local/clock_bg_263137.png
                  - type: state-label
                    entity: sensor.time
                      top: 35%
                      left: 50%
                      font-size: 5vw
                      color: white
                  - type: state-label
                      top: 70%
                      left: 50%
                      font-size: 2vw
                      color: white


1 Like

Thanks very much

Got his working but, have an odd element in the centr of the image (see attached).
I created a simple .png file filled with only color.hassio-clock

This ‘odd’ element is shown when HA can’t find your picture.
Should be in the www folder and that points to /local.
If you still created the folder, you have to restart HA.

Simple clock


class ClockCard extends Polymer.Element {
  set hass(hass) {
    if (!this.content) {
      const card = document.createElement('ha-card');
      card.header = 'What the time ?';
      this.content = document.createElement('div'); = '0 16px 16px';
    //const entityId = this.config.entity;
    //const state = hass.states[entityId];
    //const stateStr = state ? state.state : 'unavailable';
    const stateTime = moment().format('h:mm A');
    const stateDate = moment().format('dddd, MMMM DD');
    this.content.innerHTML = `
        :host {
          cursor: pointer;
        .content {
          padding: 24px 16px;
	        background-image: url("/local/images/gt-logo.png");
		    background-size: contain;
		    background-repeat: no-repeat;
        .time {
          font-family: var(--paper-font-headline_-_font-family);
          -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
          font-size: 3em;
          font-weight: var(--paper-font-headline_-_font-weight);
          letter-spacing: var(--paper-font-headline_-_letter-spacing);
          line-height: 1em;
          text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
        .date {
	      color: var(--accent-color);
          font-family: var(--paper-font-headline_-_font-family);
          -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
          font-size: 1.3em;
          font-weight: var(--paper-font-headline_-_font-weight);
          letter-spacing: var(--paper-font-headline_-_letter-spacing);
          line-height: var(--paper-font-headline_-_line-height);
          text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
        <div class="content">
	      <div class="gtlogo"></div>
	      <div class="clock">
		    <div class="time" id="time">${stateTime}</div>
		    <div class="date" id="date">${stateDate}</div>

  setConfig(config) {
    this.config = config;

  // The height of your card. Home Assistant uses this to automatically
  // distribute all cards over the available columns.
  getCardSize() {
    return 3;

customElements.define('clock-card', ClockCard);

NOTES : moment.js import before

  - url: /local/moment.js
    type: js
  - url: /local/clock-card.js
    type: js

          - type: custom:clock-card
            #entity: sensor.latest_available_version

@vipk31 I like that. Exactly what I need/want. How do I go about implementing this? I tried to create the clock-card.js with your code. I added the location to my resources: list. When I add the card to Lovelace, i get a " Uncaught ReferenceError: moment is not defined". I added moment.js to www and got the same error. Any help would be appreciated.

Oh and i had to be sure to replace your image file with this one :slight_smile:

I update source code . plz refer
NOTES : moment.js import before.
I also like liverpool (^.^)

If that doesn’t work, you should refresh lovelace the first time you start

good luck !!!

1 Like

@vipk31 Working perfectly. Thanks!! How can I remove or change the title? It says “Example Card”

const card = document.createElement(‘ha-card’);
card.header = ‘What the time ?’; // can set is null

Not sure if I am reading this correctly but where is moment.js? I can’t seem to find it.

I grabbed it from here

Thank you so much good sir!

It would be great if you can add this to github.

Thank you for this!

This works great and does exactly as it should … but any chance you could make it support HA cast ?

Attached a plain javascript version without including the whole moment.js library.

I just modified the _updateTime function:

_updateTime(force = false) {
    var days = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    var Digital = new Date();
    var hours = Digital.getHours();
    var minutes = Digital.getMinutes();
    var seconds = Digital.getSeconds();
    var day = Digital.getDate();
    var year = Digital.getFullYear();
    var month = Digital.getMonth() + 1;

    if (hours <= 9) {
        hours = "0" + hours;
    if (minutes <= 9) {
        minutes = "0" + minutes;
    if (seconds <= 9) {
        seconds = "0" + seconds;
    if (day <= 9) {
        day = "0" + day;
    if (month <= 9) {
        month = "0" + month;

    this.time.innerHTML = hours + ":" + minutes + ":" + seconds; = days[Digital.getDay()] + ", " + day + "." + month + "." + year;
1 Like