Easy date and time card, using only Markdown

Community Guides
, ,
1

Type this card code into any page, with no other dependencies. It reads its date and time directly from Home Assistant, so it requires no integrations.

Card screenshot

Screenshot 2024-04-24 at 10.33.22 AM
Screenshot 2024-04-24 at 10.33.22 AM838×222 5.25 KB

TL/DR; Code only plz kthxbye

type: markdown
content: <center><h1>{{ now().strftime('%a&nbsp;%b&nbsp;%-d, %-I:%M&nbsp;%p')}}

Explanation for nerds

Gee, that sure looks ugly. What could it all mean?

  • Center the date and time
    • <center>
    • Not too bad. I don’t know what those funky characters are but OK.
  • Make the text bigger
    • <h1>
    • Is that HTML? I’m starting to have doubts.
  • Start a template statement
    • {{
    • Template? Uh-oh
  • Get the current time, and provide it to the formatter
    • now().strftime('
    • Good $deity WTF am I even looking at?!
    • If you’re reading this far and this scares you, stop reading now! It only gets worse sorry!
  • Format the date with non-breaking spaces
  • Add a comma and a regular space
    • ,  
    • Phew! THIS I understand!
    • If you horizontally shrink or grow the page, this comma/space allows your browser to wrap between the date and the time.
  • Format the date with non-breaking spaces and no leading zero for the hour
  • Terminate!
    • ') }}
    • Brain exploded

Notes

  • If you use spaces in your date/time format instead of &nbsp;, your web browser adds the line wrap in the wrong place
    • For example Wed Apr 24, 10:42 linebreak AM
    • IMHO the bad linebreak looks horrible, thus I pay the price of uglier formatters to avoid it!
  • I am using USA-english. I assume the week days and months will use your local language. However I have not tested it.

EDIT: Variants

Version 1

I simplified: as_timestamp is unnecessary. Also now I remove leading zero from the hour.

type: markdown
content: >-
  <center><h1>{{ as_timestamp(now()) | timestamp_custom('%a&nbsp;%b&nbsp;%-d,
  %I:%M&nbsp;%p') }}

Readability

Thanks for the suggestion @Taras. If the embedded &nbsp; bother you, try this:

type: markdown
content: >-
  <center><h1>{{ now().strftime('%a_%b_%-d, %I:%M_%p') | replace('_', '&nbsp;') }}
3 Likes
2

Shorter alternative:

type: markdown
content: >-
  <center><h1>{{ now().strftime('%a %b %-d, %I:%M %p') }}

Screenshot demonstrating the two versions produce the same result:

Screenshot_20240424-112833~2
Screenshot_20240424-112833~21703×493 39.9 KB

Reference

strftime

Reasonable assumption but it will be exclusively in English, regardless of the local language.

1 Like
3

Yup, that was my first attempt as well. Now shrink your page horizontally. Watch the AM page wrap off the bottom. So sad :frowning:

1 Like
4

Both versions display a string that is subject to word wrapping wherever it finds a space character.

The first example shown below includes a single space character and that’s where the break occurs. The second example uses space characters everywhere (instead of nbsp) and so it breaks wherever it can create a string short enough to fit the available space (so all it needed was to break before the PM).

image

5

Thanks, you’ve got it exactly right.

If it’s OK for the AM to hang off by itself, then yes it is simpler to use spaces instead of &nbsp;.

I personally dislike the way that looks, so I used &nbsp; to force it to wrap between date and time.

6

If you find the pattern, supplied to strftime(), hard to read then you can make it a bit more legible like this (uses an underscore as a placeholder):

type: markdown
content: >-
  <center><h1>{{ now().strftime('%a_%b_%-d, %I:%M_%p') | replace('_', '&nbsp;') }}
7

Added to cookbook! :grin:

3 Likes
8

Whenever you use HTML tags in markdown cards, then remember to also close them off again where needed, like </center>

1 Like