Date & Time on Dashboard

Configuration Frontend
, , ,
1

Hello all,

I’m trying to setup a new Lovelace dashboard for casting to a nest hub at home.

But I’m struggling to find a date/time sensor. Obviously I see date and time in the logs, so I know Home Assistant has access to the local date and time from the system it’s running on; however I don’t know how to expose it on the dashboard. Can anyone assist?

I know I can create a helper with a static date and time, but I’d rather pull from the system itself.

2

Use the Time and Date integration to create the sensor entities you need.

Time & Date - Home Assistant (home-assistant.io)

3

I had tried that, but I couldn’t figure out a way to customize it in a more readable format…

4

What format are you getting? And what format do you want it to look like?

5

Forgot about HACS, all good now :slight_smile:

1 Like
6

Common question, no good solution.

Options below I’ve tried in no particular order, try them out and see what you like.

  1. GitHub - fufar/simple-clock-card: Simple clock card for Home assistant lovelace

  2. Something like this:

  - type: horizontal-stack
     cards:
      - type: entity
        entity: sensor.date
      - type: entity
        entity: sensor.time
  1. The complicated method I prefer. I have Node Red that creates a blank image and then I throw the text on top of that image. You’ll have to tinker with the sizes to get it to fit the way you want, but I really enjoy the customizability. Forget who I stole this from, but idea is not my own.

The card:

type: picture-elements
image: http://YOUR-IP:1880/endpoint/make_png?w=100&h=50&background=%2300000000
elements:
  - type: state-label
    entity: sensor.time
    style:
      left: 50%
      top: 40%
      font-size: 28vw
  - type: state-label
    entity: sensor.date
    style:
      left: 50%
      top: 90%
      font-size: 5vw

Node red flow code:

[{"id":"845149e64795a241","type":"tab","label":"Flow 1","disabled":false,"info":"","env":[]},{"id":"cfc4d950.0fef68","type":"http in","z":"845149e64795a241","name":"","url":"make_png","method":"get","upload":false,"swaggerDoc":"","x":170,"y":180,"wires":[["cb76a29a.06709"]]},{"id":"d7e57b07.c6aaa8","type":"http response","z":"845149e64795a241","name":"","statusCode":"200","headers":{"Content-Type":"image/png"},"x":520,"y":180,"wires":[]},{"id":"cb76a29a.06709","type":"jimp-image","z":"845149e64795a241","name":"","data":"payload","dataType":"msg","ret":"buf","parameter1":"","parameter1Type":"msg","parameter2":"","parameter2Type":"msg","parameter3":"","parameter3Type":"msg","parameter4":"","parameter4Type":"msg","parameter5":"","parameter5Type":"msg","parameter6":"","parameter6Type":"msg","parameter7":"","parameter7Type":"msg","parameter8":"","parameter8Type":"msg","parameterCount":0,"jimpFunction":"none","selectedJimpFunction":{"name":"none","fn":"none","description":"Just loads the image.","parameters":[]},"x":370,"y":180,"wires":[["d7e57b07.c6aaa8"]]}]

7 
type: custom:digital-clock
dateFormat:
  weekday: long
  day: 2-digit
  month: short
  year: numeric
timeFormat:
  hour: 2-digit
  minute: 2-digit
  second: 2-digit