Easy date and time card, using only Markdown

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

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


  • 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') }}


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;') }}

Shorter alternative:

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

Screenshot demonstrating the two versions produce the same result:



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

1 Like

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

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).


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.

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;') }}

Added to cookbook! :grin:


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

1 Like