# Dynamic " text input node "

**URL:** <https://discourse.nodered.org/t/dynamic-text-input-node/78187>\
**Category:** Dashboard\
**Created:** [4 May 2023 13:20 UTC](https://discourse.nodered.org/t/dynamic-text-input-node/78187 "2023-05-04T13:20:52Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ALIEN](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alien/32/62198_2.png) [@ALIEN](https://discourse.nodered.org/u/ALIEN)\
**Post date:** [4 May 2023 13:20 UTC](https://discourse.nodered.org/t/dynamic-text-input-node/78187/1 "2023-05-04T13:20:52Z")

</div>

Hello friends, I have a question! I would like to add a " text input node " to my dashboard in order to  
use as a time picker ( Time picker, Week picker and month picker). I read its help but I didn't understand how can I switch its mode via an arriving msg.payload!  
In fact, what I intend to do is, when I push button " week " text input mode switch to week picker and the same for two other inputs(day and month).  
I would appreciate it if you help me to find a sample or method.

Thanks

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [4 May 2023 17:17 UTC](https://discourse.nodered.org/t/dynamic-text-input-node/78187/2 "2023-05-04T17:17:51Z")

</div>

As far as I can tell it's not possible to change the mode via a msg.

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [4 May 2023 17:29 UTC](https://discourse.nodered.org/t/dynamic-text-input-node/78187/3 "2023-05-04T17:29:10Z")

</div>

One option would be to put the three pickers in different groups, then use ui-control to hide or show the groups when required.  
This [example](https://discourse.nodered.org/t/disable-a-dropdown-node-on-the-basis-of-a-switch-node-result/60882/11) may help

---

<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:** [4 May 2023 17:41 UTC](https://discourse.nodered.org/t/dynamic-text-input-node/78187/4 "2023-05-04T17:41:13Z")

</div>

> [@E1cid](#):
>
> One option would be to put the three pickers in different groups, then use ui-control to hide or show the groups when required.

That's probably how I'd do it as well.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [4 May 2023 18:02 UTC](https://discourse.nodered.org/t/dynamic-text-input-node/78187/5 "2023-05-04T18:02:48Z")

</div>

Alternatively I knocked up a quick template node to do this -

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/7/f768720130bafd8c4cd57a5a0139bd1c81a6b52b.png)

```auto
[
    {
        "id": "453b6d73626e86c5",
        "type": "debug",
        "z": "5b1aabdd384e485a",
        "name": "debug 301",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "false",
        "statusVal": "",
        "statusType": "auto",
        "x": 1160,
        "y": 720,
        "wires": []
    },
    {
        "id": "d7aecfe001d41412",
        "type": "ui_template",
        "z": "5b1aabdd384e485a",
        "group": "a605595c.ac6378",
        "name": "",
        "order": 20,
        "width": "6",
        "height": "5",
        "format": "<div>\n <button onclick=\"changeInputType('week')\">Week</button>\n <button onclick=\"changeInputType('month')\">Month</button>\n <button onclick=\"changeInputType('time')\">Time</button>\n</div>\n\n\n<input type=\"month\" id=\"Input\" onchange=\"sendValue()\">\n\n<script>\n var theScope = scope;\n var input = document.getElementById(\"Input\");\n \n function changeInputType(type) {\n input.type = type;\n }\n \n function sendValue() {\n var value = input.value;\n theScope.send({ payload: value });\n }\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 975,
        "y": 720,
        "wires": [
            [
                "453b6d73626e86c5"
            ]
        ]
    },
    {
        "id": "a605595c.ac6378",
        "type": "ui_group",
        "name": "Default",
        "tab": "78387f0f.22098",
        "order": 1,
        "disp": true,
        "width": "6",
        "collapse": false,
        "className": ""
    },
    {
        "id": "78387f0f.22098",
        "type": "ui_tab",
        "name": "Homex",
        "icon": "dashboard",
        "order": 25,
        "disabled": false,
        "hidden": false
    }
]

```

---

<div class="post-metadata">

**Author:** ![ALIEN](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/alien/32/62198_2.png) [@ALIEN](https://discourse.nodered.org/u/ALIEN)\
**Post date:** [5 May 2023 11:06 UTC](https://discourse.nodered.org/t/dynamic-text-input-node/78187/6 "2023-05-05T11:06:12Z")

</div>

Thank you @Sean-McG , @E1cid , @TotallyInformation . I appreciate your comments.  
As you suggested I will continue with adding three groups.

Have a nice weekend

---

<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:** [4 June 2023 11:06 UTC](https://discourse.nodered.org/t/dynamic-text-input-node/78187/7 "2023-06-04T11:06:34Z")

</div>

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