Number:Time Item value to HH:MM:SS format

In this post I was trying to resolve the formatting of the Number:Time Item. It was successful but I can not get it displayed in the same format in HABPanel widget. I decided to come to create this post because the previous one was actually closed.

What do I do wrong? How to format Number:Time item to the HH:mm:SS format?

This is a div section and its widget formating:

  .section_countdown {
  margin: 10px;
  .countdown {
  border: 1px solid;
  border-radius: 10px; 
  margin: auto;
  width: 100%;
 	font-size: 20px;
	<div class="section_countdown">
		<div class="countdown">{{itemValue('timerOfficeLight') | date:'HH:mm:SS'}}</div>`

Please bear in mind that I have absolutely zero clue in this because I have never used habpanel and never looked into it, never tried to learn about it.

Nevertheless, I did some looking around

Among other things I learned from glancing at that:

  • itemValue is the old name, kept for compatibility reasons. You should use itemState
  • It returns the formatted value of the item, so maybe have you tried doing it without adding the |date:xxxxx and just use itemValue / itemState ?

Thank you again for the support. I read this article and also this one I am going through several posts with similar issues. This one for example.
Since I am not a developer many times it is change and try in my case. But… I am learning.

No this is not the case. I use in other widgets itemValue and it works perfectly. It has sth with the original Item format. Since it is the Number:Time not the Date:Time it might cause issues. I will figure it out. need time an a little bit of experts support.

Number:Time is essentially just a number (like an integer) that stores (possibly) the number of seconds (sub seconds are stored as decimal points). So I’m guessing you can’t treat it as a date.

What is confusing me it the pattern ‘%tT’ used in the UI widget works perfectly

So it handles the int value somehow.
Or maybe I am just too much focused on this what the widget is displaying…
At the logfile I still see the number…

2023-03-29 12:31:34.024 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 136 s to 135 s
2023-03-29 12:31:35.026 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 135 s to 134 s
2023-03-29 12:31:36.029 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 134 s to 133 s
2023-03-29 12:31:37.032 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 133 s to 132 s
2023-03-29 12:31:38.036 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 132 s to 131 s
2023-03-29 12:31:39.039 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 131 s to 130 s
2023-03-29 12:31:40.043 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 130 s to 129 s
2023-03-29 12:31:41.047 [INFO ] [openhab.event.ItemStateChangedEvent ] - Item 'timerOfficeLight' changed from 129 s to 128 s

Yes, but javascript / vue in habpanel doesn’t use the same code to format things

and here comes my programming weakness out. I do not know javascript. In the worst case I will have to follow the solution from @shmilgan from here or deal with the item format.

Finally I went with @shmilgan suggestion and convert the value to string.
This is my rule slightly changed to @shmilgan suggestion.

rule "Countdown format"
    Item timerOfficeLight changed
    var val_now = (timerOfficeLight.state as Number).intValue
    var sec = val_now % 60
    var min = (val_now / 60) % 60
    var hrs = (val_now / (60*60)) % 24
    var day = val_now / (60*60*24)

    var String str 
    if ( day > 0 ) {
        str = String::format("%1$02d days, %2$02d:%3$02d:%4$02d", day, hrs, min, sec)

    if ((day == 0) && (hrs == 0)) {
        str = String::format("%1$02d:%2$02d", min, sec)
        str = String::format("%1$02d:%2$02d:%3$02d", hrs, min, sec)

Thanks all for the support.

Here’s a shorter rule.

rule "Countdown format"
    Item timerOfficeLight changed
    var fmt = "%tT"
    if ((timerOfficeLight.state as Number).intValue < 3600) {
      fmt = "%M:%1$tS"

It doesn’t handle “days”, but I don’t think you need it.

It’s still not ideal. You need to find out how to display formatted items in habpanel then you won’t need this rule and the extra item at all.

Thanks. Indeed. It is shorter but I had to change the formatting to:

fmt = "%1$tM:%1$tS"


right. this was my goal. So let me keep the post open for a while. Maybe someone more experience will help

I was testing you! :wink:

It could also be fmt = "%tM:%1$tS" but what you’ve got is fine too.

thank you