[RELEASE] Formatted Date and Time on Dashboard Tiles

EDIT: Personally I feel like, while there are differences in the implementation, I would suggest people start by looking at @jshimota 's driver. It provides a more rich set of attributes for display on dashboards and use in rules.

I wanted to adjust the formatting of the date and time on my dashboards, so I have setup a small device driver to achieve this, along with help from @luarmr.

The driver provides:

  • Ability to adjust formatting preferences for date and time display
  • Selection of a time zone
  • Separate date and time attributes as well as a combined date and time attribute
  • Built-in scheduling of updates (default every minute), removing any need for RM rules.
Installing and Using the Driver
  1. Open the Drivers Code section of the HE web interface, selecting "New Driver". Open the code using the link from my "post update" below (I will get this into HPM one day....), pasting the text into the new HE driver page, click Save to install the driver.

  2. In HE, navigate to the Devices page, selecting to Add Virtual Device, given the new device a name and selecting the new date format driver from the "Type" drop-down list.

  3. In the Device Edit page for the new device, enter the desired date and time formats under the Preference settings. See here for some notes on formatting options, in particular the Pattern Syntax and Patter Examples section of this page.

  4. Adjust the automatic update settings, although the default setting of every minute is mostly likely what would be required.

  5. Click Save Preferences to apply any changes

  6. To add the device to a dashboard, open the Apps page in HE, click on the dashboard under the Hubitat Dashboard app, in the configuration page add the virtual device to the list of devices available on the dashboard, clicking Done to apply the changes.

  7. Navigate to the Dashboards section of HE, selecting the dashboard to be updated

  8. Add a tile, selecting the virtual device from the Devices listing, Attribute as the Template, then select the formattedDate or formattedTime or htmlFriendlyDateTime attribute from the drop-down list.

Change Log

2021-02-11

  • Scheduling Device Updates - Added a scheduling option for refreshing the date and time attributes, rather than needing to setup an RM rule.

2021-02-27

  • Date and Time attribute - @luarmr added a "html friendly" attribute that includes both the time and date as one value.
  • Time Zone Support - @luarmr also added a time zone preference setting that is used when updating the date and time attributes. This means that different date/time virtual devices can be setup to show the current date/time in different locations. Make sure you click Save Preferences on any device using the driver when this update is applied.

2022-08-27

  • Less Chatty Device - Thanks to @luarmr again for finding an improvement to reduce chattiness of the driver for the websocket, introducing additional code to detect changes in the date / time and only sending updates to the attributes when a change has actually occurred.

2023-04-10

  • Is Daylight Saving Active - Added new attribute isDSTActive to record a true/false value for whether the time zone selected is currently in daylight savings time. Note, this is updated each time the formatted date/time values are updated.
12 Likes

That is great, I just tried it out, nice little driver.
I agree there should be a more pleasant way for the time and dates to be displayed. I hope a more elegant option can be offered by the Hubitat team

2 Likes

I have updated the original post with some more details and removed the old code, preferring to point people to my Git repository now.

Also applied an update to the code from @luarmr to include a new attribute that combines the time and date into one, plus he also added a time zone setting, allowing for display of date/times in different locations by setting up multiple virtual devices using this driver, each with different time zones configured. Great addition!! Just be sure to click Save Preferences when applying this update to the driver.

Simon

1 Like

Here is my use of this driver.
I am just starting with HE so it is my first dashboard. At the moment a signal to see if my webcam is running and Simon's date component with the timezones that I like to check.

4 Likes

Wow, that dashboard looks great!

1 Like

Hello friends, I have installed the driver, but I don't know what to put in the template, can you help me?

Do you mean the template for a dashboard tile? For that you need to select attribute and then select the attribute from the drop-down that appears on the right.

But what should I put so that it can be seen on the dashboard? I have set clock, date and it does not come out

what should i put here

After you have installed the driver code you need to create a virtual device that uses the driver, then add a tile to your dashboard using that virtual device and the attribute template like I described. Does that make sense? I can put a few more notes together later tonight my time if you are still stuck, or if others can help that would be great..

I already did everything like this, add virtual device and put it in my dashboard, but I don't know what to put in the template tab ...

Do you get a drop-down appear when you select the attribute template like you showed in the screenshot? If not, make sure you have selected the device in the earlier list in the add tile screen. Is it which attribute to choose that you are not sure about?

Yes, I don't know which attribute to select

What do I select here? That is what I want to know

There is another drop down that should appear with the list of attributes. I'd show you a screenshot, but am not at my PC....

I don't understand what you mean by another dropdown

In the Options section on the right a drip down should appear once you have a device selected and the attribute template selected

Here the driver is selected, it's called time, and when I select nothing else, I get the usual thing on the right side

Now select the attribute template in the centre