# Date range picker

**URL:** <https://discourse.nodered.org/t/date-range-picker/47625>\
**Category:** General\
**Created:** [25 June 2021 07:21 UTC](https://discourse.nodered.org/t/date-range-picker/47625 "2021-06-25T07:21:28Z")\
**Posts on this page:** 1\
**Showing post:** 6

<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:** [25 June 2021 09:55 UTC](https://discourse.nodered.org/t/date-range-picker/47625/6 "2021-06-25T09:55:43Z")

</div>

Try this...

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/2/f24b075f9eca666f730789e62e26ef592c528fbc.png)

outputs...  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/7/5732785cbbf6a160d4fd83e9b81ddc3537baf000.png)

---

_[View the full topic](https://discourse.nodered.org/t/date-range-picker/47625)._