Ui-slider as a date or time picker?

Dashboard
1

In the absence of a date picker node for dashboard 2, how easy would it be to make the ui-slider work as a date/time picker?

I suppose, in the background the range min and max could be set as epoch (in seconds?)
So
1721606400 is Monday, July 22, 2024 0:00:00
1721865600 is Thursday, July 25, 2024 0:00:00
For a date picker the step would be 86400

Here is an example showing 1 week, 2024-07-24 00:00:00 to 2024-07-31 00:00:00 with ticks at 86400 second intervals

image
image776Ă—137 3.93 KB

Since step sizes 86400 and 3600 are a bit unlikely in any other context, they could trigger the node to automatically format the displayed value as a date YYYY-MM-DD or as a time hh:mm

I think that's the only change necessary, but a dropdown for min and max as date or time and for step size as 1hr or 1 day would make it easier to use.

2

The ui-text-input has a "Date" type: Text Input ui-text-input | Node-RED Dashboard 2.0

3

Presumably because it is "just" an <input> element which has 22 different input types :slight_smile:

4

Doh. It never occurred to me to look there!
Thanks both.

Mind you, I still think the slider option might be neat. :grinning:

5

It would be easy enough to build. Where the slider simply sets the number of days advance rather than actually using date values.

You can use a datalist for that.

<datalist id="values">
  <option value="0" label="Today"></option>
  <option value="1" label="Tomorrow"></option>
  <option value="2" label="..."></option>
  ...
</datalist>

You could set the labels dynamically so that they contained the text dates.

6

If you get that sorted and working perhaps you could share that here

7

Here is an example - using UIBUILDER instead of D2 though I'm afraid.

HTML:

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Blank template - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Blank template">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    /* <script defer src="./index.js"></script> */
    <!-- #endregion -->

</head><body class="uib">
    <h1 class="with-subtitle">uibuilder Blank Template</h1>
    <div role="doc-subtitle">Using the IIFE library.</div>

    <style>
        datalist {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            writing-mode: vertical-lr;
            width: 200px;
        }

        option {
            padding: 0;
        }

        input[type="range"] {
            width: 200px;
            margin: 0;
        }
    </style>

    <datalist id="values">
        <option value="0" label="Today"></option>
        <option value="1" label="Tomorrow"></option>
        <option value="2" label="+2"></option>
        <option value="3" label="+3"></option>
        <option value="4" label="+4"></option>
        <option value="5" label="+5"></option>
        <option value="6" label="+6"></option>
        <option value="7" label="+7"></option>
    </datalist>

    <input type="range" id="tempB" name="temp" list="values" step="1" max="7" min="0" onchange="uibuilder.eventSend(event)"/>
    <label for="tempB">Choose days ahead</label>
</body></html>

image

Unfortunately, a small bug in UIBUILDER v6 means that using uibuilder.eventSend will not return the value, this is fixed in v7. But of course, you can use your own custom code that uses:

<input type="range" id="tempB" name="temp" 
       list="values" step="1" max="7" min="0" 
       onchange="uibuilder.send({payload: this.value})" />
1 Like
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.