Format the text of helpers.relativeTime

[DanDixon]

I'd like to shorten the relativeTime output so it fits in a smaller space:

left = relativeTime
right = custom code that I was hoping relativeTime would replace

I'd like to do something like this:

        var rt = helpers.relativeTime(states['input_datetime.porch_arrived'].state)
        rt = rt.replace("hours","h")
        return str;

But relativeTime:

Returns an lit-html template which will render a relative time and update automatically.

And so you can't make any change to the text output of relativeTime apparently.

For example:

        var rt = helpers.relativeTime(states['input_datetime.porch_arrived'].state)
        return "x" + rt;

Shows this:

Any workarounds for this?

[ganjakyp-hub]

Hi DanDixon, did you find a solution to your issue?

[roblomq]

Have the same sort question.
Where

    label: >
     [[[
      var TimeAgo = helpers.relativeTime(states['binary_sensor.garagedeur_any'].last_changed);
      return (TimeAgo)
     ]]]

Gives

While

    label: >
     [[[
      var TimeAgo = helpers.relativeTime(states['binary_sensor.garagedeur_any'].last_changed);
      return 'Door closed ' + (TimeAgo) + ' ago.'
     ]]]

gives

[ngocjohn]

#753 (comment)

[ngocjohn]

But last_changed is for every state change, in your case also in case the door has opened...
use this function to convert datetime object to string..

      - type: custom:button-card
        entity: light.ceiling_lights
        name: Test Light
        show_state: true
        show_label: true
        label: >
          [[[
            if (entity !== undefined) {
                let timeAgo = states['light.ceiling_lights'].last_changed;
                //console.log(timeAgo);

                function timeSince(date) {
                    const now = new Date();
                    const secondsPast = (now - new Date(date)) / 1000;

                    if (secondsPast < 60) {
                        return `${Math.floor(secondsPast)} seconds`;
                    }
                    if (secondsPast < 3600) {
                        return `${Math.floor(secondsPast / 60)} minutes`;
                    }
                    if (secondsPast < 86400) {
                        return `${Math.floor(secondsPast / 3600)} hours`;
                    }
                    if (secondsPast < 2592000) {
                        return `${Math.floor(secondsPast / 86400)} days`;
                    }
                    if (secondsPast < 31536000) {
                        return `${Math.floor(secondsPast / 2592000)} months`;
                    }
                    return `${Math.floor(secondsPast / 31536000)} years`;
                }
                var timeAgoStr = timeSince(timeAgo);
                return 'Light state changed ' + timeAgoStr + ' ago';
            }
          ]]]

[Mariusthvdb]

But did you check the format helpers? There a quite a few of them and no need for the super complex templates at all.

Most is simply built right in
Check just above the Styles paragraph
https://github.com/custom-cards/button-card?tab=readme-ov-file#styles