# Ui-slider as a date or time picker?

**URL:** <https://discourse.nodered.org/t/ui-slider-as-a-date-or-time-picker/89725>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [24 July 2024 13:03 UTC](https://discourse.nodered.org/t/ui-slider-as-a-date-or-time-picker/89725 "2024-07-24T13:03:07Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 July 2024 13:03 UTC](https://discourse.nodered.org/t/ui-slider-as-a-date-or-time-picker/89725/1 "2024-07-24T13:03:07Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/64fe01570adbee318c74115c2db80df354eda9ff.png)

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.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [24 July 2024 13:14 UTC](https://discourse.nodered.org/t/ui-slider-as-a-date-or-time-picker/89725/2 "2024-07-24T13:14:08Z")

</div>

The `ui-text-input` has a "Date" type: [Text Input ui-text-input | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/nodes/widgets/ui-text-input.html#example)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 July 2024 13:50 UTC](https://discourse.nodered.org/t/ui-slider-as-a-date-or-time-picker/89725/3 "2024-07-24T13:50:36Z")

</div>

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

> **[: The Input (Form Input) element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)**
>
> The HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The element is one...

---

<div class="post-metadata">

**Author:** ![jbudd](https://avatars.discourse-cdn.com/v4/letter/j/5f8ce5/32.png) [@jbudd](https://discourse.nodered.org/u/jbudd)\
**Post date:** [24 July 2024 14:05 UTC](https://discourse.nodered.org/t/ui-slider-as-a-date-or-time-picker/89725/4 "2024-07-24T14:05:35Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 July 2024 16:27 UTC](https://discourse.nodered.org/t/ui-slider-as-a-date-or-time-picker/89725/5 "2024-07-24T16:27:56Z")

</div>

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.

```auto
<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.

---

<div class="post-metadata">

**Author:** ![gerry](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gerry/32/21604_2.png) [@gerry](https://discourse.nodered.org/u/gerry)\
**Post date:** [24 July 2024 16:39 UTC](https://discourse.nodered.org/t/ui-slider-as-a-date-or-time-picker/89725/6 "2024-07-24T16:39:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [24 July 2024 20:00 UTC](https://discourse.nodered.org/t/ui-slider-as-a-date-or-time-picker/89725/7 "2024-07-24T20:00:42Z")

</div>

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

HTML:

```auto
<!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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/5/55d8219e701db3fd321cc621d0155059326b6f2c.png)

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:

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

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [23 August 2024 20:01 UTC](https://discourse.nodered.org/t/ui-slider-as-a-date-or-time-picker/89725/8 "2024-08-23T20:01:24Z")

</div>

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