# Period Picker (2 dates from calendar) in ui\_template node

**URL:** <https://discourse.nodered.org/t/period-picker-2-dates-from-calendar-in-ui-template-node/79095>\
**Category:** Dashboard\
**Created:** [10 June 2023 16:25 UTC](https://discourse.nodered.org/t/period-picker-2-dates-from-calendar-in-ui-template-node/79095 "2023-06-10T16:25:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 June 2023 16:25 UTC](https://discourse.nodered.org/t/period-picker-2-dates-from-calendar-in-ui-template-node/79095/1 "2023-06-10T16:25:10Z")

</div>

I have successfully copied and modified a template node (i dont remember now where), a template node which helps me pick a month and year combination like below, (this is from my dashbaord)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/7/67804822424da8e8796e4ffeca12526a69a42441.png)

however, i need for another project a date range picker from two calendar drop downs as shown in the picture below, (this is from [daterangepicker.com](http://daterangepicker.com))  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f5eae9f24cc41c09c1934c5dfbe0dce6eae33957.png)

and the copied code in template does not give the expected result.what am i doing wrong ? i can see only a small window where i can type something.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/8/b8ca219c8eaeb4c9c41bbf2dd025168becde976f.png)

```auto
[{"id":"80b7dc69426c44a2","type":"ui_template","z":"a0eee751005e0e89","group":"7b74ecc34bf6b2cd","name":"Chose Period","order":2,"width":"8","height":"6","format":"<input type=\"text\" name=\"datefilter\" value=\"\" />\n\n<script type=\"text/javascript\">\n$(function() {\n\n $('input[name=\"datefilter\"]').daterangepicker({\n autoUpdateInput: false,\n locale: {\n cancelLabel: 'Clear'\n }\n });\n\n $('input[name=\"datefilter\"]').on('apply.daterangepicker', function(ev, picker) {\n $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));\n });\n\n $('input[name=\"datefilter\"]').on('cancel.daterangepicker', function(ev, picker) {\n $(this).val('');\n });\n\n});\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":350,"y":30,"wires":[["f540d856309e0b4d"]]},{"id":"829cae0833e7e19e","type":"ui_template","z":"a0eee751005e0e89","group":"7b74ecc34bf6b2cd","name":"Chose Month","order":2,"width":6,"height":3,"format":"<script>\nthis.scope.action = function() { \n var value = document.getElementById(\"Month\").value\n return value; }\n</script>\n<label for=\"Month\">Choose the Month:</label>\n\n<input type=\"month\" id=\"Month\" name=\"Month\" ng-model=\"Month\" ng-change=\"send({payload:action()})\"\n min=\"{{msg.min}}\" max=\"{{msg.max}}\" ng-value=\"msg.now\">","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","className":"","x":340,"y":90,"wires":[["f540d856309e0b4d"]]},{"id":"7b74ecc34bf6b2cd","type":"ui_group","name":"SELECT","tab":"05480f2daa7b1454","order":1,"disp":false,"width":"30","collapse":false,"className":""},{"id":"05480f2daa7b1454","type":"ui_tab","name":"MACHINE","icon":"dashboard","order":7,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [10 June 2023 16:46 UTC](https://discourse.nodered.org/t/period-picker-2-dates-from-calendar-in-ui-template-node/79095/2 "2023-06-10T16:46:25Z")

</div>

> [@smanjunath211](#):
>
> i dont remember now where

it was from here, i found the right thread,exploring further now.

> [@Calculate Last Date of a Month](https://discourse.nodered.org/t/calculate-last-date-of-a-month/56976/11):
>
> I worked a bit more on the above example with options more suited for your needs. by adding in the options of the datetimepicker to disable date and time and also limit it to todays date. (also added a button to send the selected date) [image] [{"id":"d4a06909c7c81b1b","type":"ui\_template","z":"54efb553244c241f","group":"397fec83949c5c0b","name":"","order":0,"width":"6","height":"6","format":"\<link rel=\"stylesheet\" href=\"https://pro.fontawesome.com/releases/v5.10.0/css/all.css\"\n integr…

---

<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 July 2023 16:46 UTC](https://discourse.nodered.org/t/period-picker-2-dates-from-calendar-in-ui-template-node/79095/3 "2023-07-10T16:46:52Z")

</div>

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