Add a simple digital clock and date panel to home tab

Configuration
1

Hi

I’d like to add a panel with time and date, something like this:

image

That shows all the time

But all I’ve been able to get is this:

image

Anyone know how to do this?

Thank you

2

Here you go: https://www.home-assistant.io/components/time_date/ :slight_smile:

3

That’s what I already have:

# Sensors
sensor:
  - platform: time_date
    display_options:
      - 'time_date'

An what I get is:

image

4

One option is to add all the entities to a group, and add the group to the default view.
image

Or this Just a big clock

5

I like this look:

image

what option do I have to add?

I tried:
configuration.yaml

sensor:
  - platform: time_date
    display_options:
      - date
      - time

but got these:
image

not a panel

6

If you are using Lovelace add an entities card and add the time and date entities to it.

If you are using the states based front end you need to set up a group:

then add the group to a view.

7

Checkout GROUPS, have a read let me know if you need help.

8

Sorry for the misinterpretation
Added this entry to groups.yaml

sensor:
    name: Time and Date
    view: true
    entities:
        - sensor.time
        - sensor.date

and got this:

image
image1005×205 5.58 KB

no panel

I’d tried to use groups and I always have to say that it’s a sensor or an automation, …
what am I missing?

Not ready for lovelace just yet :smiley:

9

That’s because you have it as a separate view, try it like this with two groups if you want it in it’s own view:

Groups:

time_and_date:
    name: Time and Date
    view: yes
    control: hidden
    entities:
        - group.time_date_sensors

time_date_sensors:
    name: Time Date
    view: no
    control: hidden
    entities:
        - sensor.date
        - sensor.time
2 Likes
10

Thanks, it worked perfectly. I really don’t understand groups.

taking the second code which is the one that appears on home page, It says it’s hidden an has no view. How come it appears as a panel?

11

Although admittedly this is a more advanced option, I use the Compact Custom Header lovelace component. The right side of my header looks like this:

42%20PM

https://github.com/maykar/compact-custom-header

Here is my config

- type: custom:compact-custom-header
  main_config: true
  clock_date: true
  menu: overflow
  notifications: clock
  options: show
1 Like
12

Unless I misunderstand your question, if you add the first group in my example to the default view, it will show up as intended.

13

You can also use icons instead of displaying the group names, when you hover over the icon it shows the group name, see below.

image

14

The second was what I intended, didn’t want a tab with the time, but I was completely lost and tried many solutions I had found in other pages with no success.

I just commented the first group and left:

time_date_sensors:
name: Time Date
view: no
control: hidden
entities:
- sensor.date
- sensor.time

And it’s on the home page:

image
image1020×777 58.3 KB

And used your approach to add the sensors in the left

But still don’t get why hiding the control and denying the view, the circles disappear and appears a panel instead

I tried the icons, and seached for them in this page:

But at least hourglass-empty didn’t work. Do I have to install them?
neither npm install @mdi/font or bower are commands on the alpine linux where hassio is running

Thank you


BrianHanifin

I will try it when I’m ready for lovelace

1 Like
15

That’s the way the old States based front-end was programmed. Sensors appear as badges unless you add them to a group. Then they only appear in the group.

You should really be moving to Lovelace. You have a lot more control over what you can display (badges and card views of the same sensors for example).

16

Ohh
Thank you for the explanation and the advice.
:smiley:

1 Like
17

Where do I put the config file to get the clock /time in the main header?

18

Anyway to have this display 12 hour not 24

1 Like
19

Hello all,

am quite new in HASS, so please forgive me, if this question is stupid…

I would like to have simple date and clock in my HASS. In the file editor I typed this code in
configuration.yaml:

1

but nothing happens. I have neither a card nor a small circle in the top with time inside.

Probably some step is missing.

Please help.

20

A couple of things:

please don’t post screenshots of code. people are less likely to help if they have to type all of their suggestions out instead of just copy/edit/paste your original code.

you also don’t mention if you’ve started configuring your frontend yourself (taken control…).

if you have then you need to add the sensor to a card since it won’t be there automatically. And if you haven’t I’m not sure if will be there or not.

Have you restarted HA after you added that code? Do you get errors in the config checker or logs?

does the sensor show up in your developers tolls-> states page?