Help with some code to display time and date

Configuration Frontend
1

Hi Guys, i’ve created a card with some code i found on here but i cant find the page where i found it now.
It’s to display the time and date on a sidebar i’m trying to create.
The code below works great but displays as
11:32
Friday, 24 2021
but i’m trying to work out how to have it display as
11:32
Friday 24th December
Could anyone point me in the right direction or is there a better way of doing it as a sensor maybe
Thanks

clock

type: custom:mod-card
card:
  type: custom:html-template-card
  ignore_line_breaks: true
  content: |
    {% set day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] %}
    {% set month = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"] %}
    <h2>{{states('sensor.time')}}</h2>
    <div class="date">{{day[now().strftime('%w') | int]}}, {{ now().strftime('%-d') }} {{ month[now().strftime('%-m') | int] }} {{ now().strftime('%Y') }}</div>
card_mod:
  style: |
    :host {
      top: 10%;
      left: 50%;
      width: 100%;
    }
    h2 {
      font-size: 65px;
      margin-top: 12px
      margin-left: 150px;
    }
    .date {
      font-size: 24px;
      color: #aaa8a8
    }
2

It doesn’t make sense.
The code you posted should output the month before the year, but it doesn’t (according to you).
The only thing I can think of is that the month is written as month[now().strftime('%-m') when it probably should be without the - in %-m.
That is the only thing I can think of that the month is read as a negative number and that doesn’t exist in the array.

1 Like
3

I’m not sure why you need all of the variables?

try this:

<div class="date">{{now().strftime('%A, %-d %B %Y') }}</div>

should result in:

Friday, 24 December 2021

however the reason why the month didn’t show up correctly in yours is because the “%-m” returns the month as a number of 1 thru 12. your array will be accessed via it’s index number which goes from 0 thru 11. there is no array index 12 so it renders nothing.

you can try it with substituting a hard coded value in the template for the month as 11 (works) and as 12 (doesn’t work).

EDIT: fixed a typo above…

1 Like
4

Thanks for the replies guys.
I’ve just copied this code over and that displays great thanks, do you know how i can add the 2 digits after the day so 24th, 1st etc.
I tried looking through here to work it out but can’t see mention of that.

5

That becomes a little more complex since it’s not built-in (that I know of…)

try this:

{% set day_of_month = now().day %}
{% if day_of_month == 1 %}
  {% set display_date = day_of_month ~ 'st' %}
{% elif day_of_month == 2 %}
  {% set display_date = day_of_month ~ 'nd' %}
{% elif day_of_month == 3 %}
  {% set display_date = day_of_month ~ 'rd' %}
{% else %}
  {% set display_date = day_of_month ~ 'th' %}
{% endif %}
<h2>{{states('sensor.time')}}</h2>
<div class="date">{{now().strftime('%A') ~ ', ' ~ display_date ~ ' ' ~ now().strftime('%B %Y') }}</div>

you get:

Friday, 24th December 2021

Notice you don’t need “strftime” because you can use the “.day” attribute of now().

1 Like
6

That looks great can’t add it just yet but see what you mean
Thanks
Merry Christmas :grin:

1 Like
7

Hi i finally had chance to add this and it works great.
Could you help me with the formatting please.
I’m now trying to force a line break so the day of the week is on the top line then the date and month the line underneath so…
Sunday,
26th December
And also the line spacing, as you can see they the lines are too close but i can’t work out where to put the padding or margin etc.
i tried adding the

to your code but it just disappears no matter where on the line i tried :slight_smile:
<div class="date">{{now().strftime('%A') ~ ', ' ~ display_date ~ ' ' ~ <p>now().strftime('%B ')<p> }}</div>
Lastly i’m wanting to make the date move closer to the time as well would that be in the card mod options?
Sorry for all the daft questions
Thanks
clock

8

It seems to be html/css you style with so read up on how to do padding with css.

9

Yeah i’ve been reading up on it here.

It’s mainly getting them on 2 separate lines i can’t figure out lol
Thanks

10

If you wish, you can use this to compute a date’s (abbreviated) ordinal number:

{% set index = 3 if now().day // 10 == 1 or now().day % 10 == 0 else (now().day % 10) - 1 %}
{% set display_date = now().day ~ 'th' if index > 2 else now().day ~ ['st', 'nd', 'rd'][index] %}
1 Like
11

I’m pretty sure <br> is a line break in html.

and seeing Taras post above I realized I forgot about days 21, 22, 23, 31.

So you can do it either with his (fancier and slightly more compact but a bit harder to read :wink:) version or this one:

<h2>{{states('sensor.time')}}</h2>
{% set day_of_month = now().day %}
{% if day_of_month in [1, 21, 31] %}
  {% set display_date = day_of_month ~ 'st' %}
{% elif day_of_month in [2, 22] %}
  {% set display_date = day_of_month ~ 'nd' %}
{% elif day_of_month in [3, 23] %}
  {% set display_date = day_of_month ~ 'rd' %}
{% else %}
  {% set display_date = day_of_month ~ 'th' %}
{% endif %}
<div class="date">{{now().strftime('%A') ~ ', ' ~ display_date }} <br> {{now().strftime('%B %Y') }}</div>

I haven’t tested the line break so I’m not sure if that works for what you want.

1 Like
12

Thanks i couldn’t get that to display how i wanted on 2 lines for some reason.
After some work on the Here i managed to get it how i wanted using this line with your other code.
<div class="date"><p>{{now().strftime('%A')}},</p><p>{{display_date}} {{now().strftime('%B')}}</p></div>