Tap Action on large time and date card

Configuration Frontend
1

I like having the time and date in the first position of my dash, and I’ve used a variety of ways of displaying them, and currently use markdown cards:

type: vertical-stack
cards:
  - type: markdown
    card_mod:
      style: |
        ha-card {
          color: var(--primary-text-color);
          background-color: #000000;
          border-color: #000000;
          font-size: 6em;
          margin-bottom: 4px;
          margin-top: 10px;
          text-align: center;
          font-weight: bold;
        }
    content: |-

      {{now().strftime('%H')}}:{{now().strftime('%M')}}
    tap_action:
      action: null
      service: homeassistant.toggle
      entity_id: input_boolean.xlo
  - type: markdown
    card_mod:
      style: |
        ha-card {
          background-color: #000000;
          border-color: #000000;
          color: var(--primary-text-color);
          font-size: 2em;
          margin-bottom: 1px;
          text-align: center;
          font-weight: bold;
        }
    content: >-

      {% set dayz = ["Mon", "Tue","Wed","Thu","Fri","Sat","Sun"] %} 

      {% set monthz = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug",
      "Sep", "Oct", "Nov", "Dec"] %}

      {{ dayz[now().weekday()] }},  {{monthz[now().month-1] }} {{now().day}},
      {{now().year}}
    columns: 1
    tap_action:
      action: null
      service: homeassistant.toggle
      entity_id: input_boolean.xlo

Now I would like to add a tap_action, specifically to toggle the visibility of a conditional with 15 button-cards on it. Someone on reddit suggested doing this with custom:button-card’s, which can show the time and date, but I can’t see how to get the large font, format the date, and the entity sensor.time doesn’t seem to produce the digital military time. I realize custom:button-card has a wealth of formatting options and indeed I use them extensively.
card
The picture shows part of my dashboard, but on the tablet dash the time is large enough to see across the room.

Anyone have a related solution?

2

Hi I’ve got a time card made with custom:button-card maybe this will help you a bit further?

type: custom:button-card
name: |
  [[[
  var d = new Date();
  return d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
  ]]]
show_state: true
show_icon: false
show_name: true
color: white
color_type: card
styles:
  name:
    - font-family: AppleSDGothicNeo-Thin
    - font-size: 80px
    - letter-spacing: 0.05em
    - color: white
  card:
    - background-color: rgba(0, 0, 0, 0)
    - border: 0px solid white
    - border-radius: 10px

Scherm­afbeelding 2024-02-22 om 11.15.37

1 Like
3

Yes, that helps – I can make the time clickable, which lets me hide the buttons, and I can likely make the date work the same way. Thank you!

4

Glad it works for you!
To return a date in the same way you could use something like the following code:

  [[[
  var n = new Date();
  return n.toLocaleDateString("nl-NL", {day:"numeric",weekday:"long",month:"long"});
  ]]]

Where I use nl-NL you can replace that with your locale code en-US for example. Then the days and months will be translated to your language.

5

Here is what I ended up using:

type: custom:button-card
name: >
  [[[

  var d = new Date();

  return d.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit',hourCycle:
  'h23',});

  ]]]
show_state: false
show_icon: false
show_name: true
color: white
color_type: card
styles:
  name:
    - font-family: Roboto
    - font-size: 5em
    - letter-spacing: 0.05em
    - color: white
    - text-align: center;
    - font-weight: bold;
    - margin: none;
  card:
    - background-color: rgba(0, 0, 0, 0)
    - border: 0px solid white
    - border-radius: 10px
    - box-shadow: none;
    - background: none;
    - padding: 0px !important;
tap_action:
  action: call-service
  service: input_boolean.toggle
  target:
    entity_id: input_boolean.rlo

which produces military time, which I prefer.

1 Like