# Datepicker for Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/datepicker-for-dashboard-2-0/98095>\
**Category:** General\
**Created:** [12 July 2025 03:39 UTC](https://discourse.nodered.org/t/datepicker-for-dashboard-2-0/98095 "2025-07-12T03:39:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![tsuratolya](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tsuratolya/32/59853_2.png) [@tsuratolya](https://discourse.nodered.org/u/tsuratolya)\
**Post date:** [12 July 2025 03:39 UTC](https://discourse.nodered.org/t/datepicker-for-dashboard-2-0/98095/1 "2025-07-12T03:39:08Z")

</div>

Hello. I want to make a datepicker using the template node for Dashboard 2.0. It doesn't lead to debug. Who has done this or maybe there is a ready node for Dashboard 2.0?

```auto
[
    {
        "id": "7bdf60739e7e5351",
        "type": "ui-template",
        "z": "c0414ea6e5d31e57",
        "group": "50c695cae29114f4",
        "page": "",
        "ui": "",
        "name": "",
        "order": 1,
        "width": "7",
        "height": "5",
        "head": "",
        "format": "<div>\n <label for=\"dt\">Выберите дату и время:</label><br>\n <input type=\"datetime-local\" id=\"dt\">\n <br><br>\n <button id=\"sendBtn\">Отправить</button>\n</div>\n\n<script>\n(function(scope) {\n // Эта функция запускается каждый раз, когда шаблон активируется\n scope.$watch('msg', function(msg) {\n const btn = document.getElementById(\"sendBtn\");\n if (!btn) return;\n\n if (!btn.dataset.listenerAttached) {\n btn.addEventListener(\"click\", function () {\n const input = document.getElementById(\"dt\");\n if (input && input.value) {\n const iso = new Date(input.value).toISOString();\n scope.send({ payload: iso });\n } else {\n scope.send({ payload: \"Ничего не выбрано\" });\n }\n });\n btn.dataset.listenerAttached = \"true\";\n }\n });\n})(scope);\n</script>\n",
        "storeOutMessages": true,
        "passthru": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 380,
        "y": 1740,
        "wires": [
            [
                "f42ed95a64a24088"
            ]
        ]
    },
    {
        "id": "f42ed95a64a24088",
        "type": "debug",
        "z": "c0414ea6e5d31e57",
        "name": "debug 594",
        "active": true,
        "tosidebar": true,
        "console": false,
        "tostatus": false,
        "complete": "true",
        "targetType": "full",
        "statusVal": "",
        "statusType": "auto",
        "x": 530,
        "y": 1740,
        "wires": []
    },
    {
        "id": "50c695cae29114f4",
        "type": "ui-group",
        "name": "sim800l",
        "page": "7dfe5adef484a0e0",
        "width": "12",
        "height": "1",
        "order": 1,
        "showTitle": true,
        "className": "",
        "visible": "true",
        "disabled": "false",
        "groupType": "default"
    },
    {
        "id": "7dfe5adef484a0e0",
        "type": "ui-page",
        "name": "sim800l",
        "ui": "1bb9db23437aaf62",
        "path": "/page19",
        "icon": "home",
        "layout": "grid",
        "theme": "27357e1026156686",
        "breakpoints": [
            {
                "name": "Default",
                "px": "0",
                "cols": "3"
            },
            {
                "name": "Tablet",
                "px": "576",
                "cols": "6"
            },
            {
                "name": "Small Desktop",
                "px": "768",
                "cols": "9"
            },
            {
                "name": "Desktop",
                "px": "1024",
                "cols": "12"
            }
        ],
        "order": 1,
        "className": "",
        "visible": true,
        "disabled": false
    },
    {
        "id": "1bb9db23437aaf62",
        "type": "ui-base",
        "name": "Устройства Управления",
        "path": "/dashboard",
        "appIcon": "",
        "includeClientData": true,
        "acceptsClientConfig": [
            "ui-notification",
            "ui-control"
        ],
        "showPathInSidebar": false,
        "navigationStyle": "icon",
        "titleBarStyle": "default"
    },
    {
        "id": "27357e1026156686",
        "type": "ui-theme",
        "name": "Default Theme",
        "colors": {
            "surface": "#ffffff",
            "primary": "#0094CE",
            "bgPage": "#eeeeee",
            "groupBg": "#ffffff",
            "groupOutline": "#cccccc"
        },
        "sizes": {
            "pagePadding": "12px",
            "groupGap": "12px",
            "groupBorderRadius": "4px",
            "widgetGap": "12px"
        }
    }
]

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [12 July 2025 06:39 UTC](https://discourse.nodered.org/t/datepicker-for-dashboard-2-0/98095/2 "2025-07-12T06:39:56Z")

</div>

Does it need to be in a template? Because the ui-text-input can be set to provide a date picker.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/c/0c1f0cdc2d04f91b7c2eb5ff564f95c32c33359e.png)  
Or a form element  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/9/49bf13dc82fef05eaf5b8cc720d7c6d95c3ac20c.png)

Alternatively, you can read [here in the online docs](https://dashboard.flowfuse.com/nodes/widgets/ui-template#sending-messages-to-node-red) how to send messages from a template to Node-RED (your current template has Dashboard1 Angular code `(function(scope) {` instead of `vue` code)

e.g.

```auto
<template>
    <div>
    <label for="dt">Выберите дату и время:</label><br>
    <input type="datetime-local" id="dt" v-model.lazy="value">
    <br><br>
    <button id="sendBtn" @click="send({payload:value})">Отправить</button>
    </div>
</template>

```

---

<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:** [10 October 2025 06:40 UTC](https://discourse.nodered.org/t/datepicker-for-dashboard-2-0/98095/3 "2025-10-10T06:40:21Z")

</div>

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