Datepicker for Dashboard 2.0

General
1

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?

[
    {
        "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"
        }
    }
]
2

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

image
image340×462 9.26 KB

Or a form element
image
image698×579 15.1 KB

Alternatively, you can read here in the online docs 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.

<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>