Date range picker

Try this...

[{"id":"d3a08df34c80da26","type":"ui_template","z":"3422959b.40de62","group":"dce9e7a2.d20c78","name":"HEAD scripts and css","order":6,"width":0,"height":0,"format":"\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/momentjs/latest/moment.min.js\"></script>\n<script type=\"text/javascript\" src=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js\"></script>\n<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css\" />","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","className":"","x":1410,"y":560,"wires":[[]]},{"id":"c38c270948239c48","type":"ui_template","z":"3422959b.40de62","group":"dce9e7a2.d20c78","name":"","order":7,"width":"0","height":"0","format":"\n<input type=\"text\" id=\"daterange1\" />\n\n<script>\n    \n    const scope = this.scope;\n    $('#daterange1').daterangepicker({\n        timePicker: true,\n        locale: {\n            format: 'YYYY-MM-DD hh:mm A'\n        }\n    });\n    $('#daterange1').on('apply.daterangepicker', function(ev, picker) {\n        let payload = {};\n        payload.startDate = picker.startDate.format('YYYY-MM-DD');\n        payload.endDate = picker.endDate.format('YYYY-MM-DD');\n        payload.startTime = picker.startDate.format('HH:mm:ss');\n        payload.endTime = picker.endDate.format('HH:mm:ss');\n        scope.send({payload:payload});\n    });\n\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1380,"y":620,"wires":[["e406483b65814957"]]},{"id":"e406483b65814957","type":"debug","z":"3422959b.40de62","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":1550,"y":620,"wires":[]},{"id":"dce9e7a2.d20c78","type":"ui_group","name":"Object detection","tab":"5132060d.4cde48","order":1,"disp":true,"width":"9","collapse":false},{"id":"5132060d.4cde48","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

working example...
image

outputs...
image

3 Likes