# UI-Form to get From and To Dates

**URL:** <https://discourse.nodered.org/t/ui-form-to-get-from-and-to-dates/95283>\
**Category:** Dashboard\
**Tags:** dashboard-2, ui-form\
**Created:** [10 February 2025 12:26 UTC](https://discourse.nodered.org/t/ui-form-to-get-from-and-to-dates/95283 "2025-02-10T12:26:27Z")\
**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 February 2025 12:26 UTC](https://discourse.nodered.org/t/ui-form-to-get-from-and-to-dates/95283/1 "2025-02-10T12:26:27Z")

</div>

I am using a ui-form to get a period of dates.  
Is it possible to put restriction on the second date, depending on the first date, without exiting the node ? so user Should NOT be able to put a 'to' date in the past with comparison to 'From ' date.

---

<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:** [18 February 2025 15:51 UTC](https://discourse.nodered.org/t/ui-form-to-get-from-and-to-dates/95283/2 "2025-02-18T15:51:29Z")

</div>

I found a source where i can get this done, but unfortunately, i am unable to adapt this code to the template node. any help in this regard, would be really great.

> **[Datepicker | jQuery UI](https://jqueryui.com/datepicker/#date-range)**
>
> jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form...

I copied the html section into `<template></template>` section and js into `<script></script>`, but i get only two text blank input boxes. it is clear i have not understood the template node very clearly.

```auto
[{"id":"f94e121cbfa7f1c5","type":"debug","z":"62c89c281282ae06","name":"debug 2923","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":730,"y":980,"wires":[]},{"id":"696bd65894aff1ee","type":"ui-template","z":"62c89c281282ae06","group":"fb256f6c662bd279","name":"","order":0,"width":"5","height":"6","head":"","format":"<template>\n <!DOCTYPE html><html lang=\"en\"><head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n <title>jQuery UI Datepicker - Select a Date Range</title>\n <link rel=\"stylesheet\" href=\"https://code.jquery.com/ui/1.14.1/themes/base/jquery-ui.css\">\n <link rel=\"stylesheet\" href=\"/resources/demos/style.css\">\n\n <script src=\"https://code.jquery.com/jquery-3.7.1.js\"></script>\n <script src=\"https://code.jquery.com/ui/1.14.1/jquery-ui.js\"></script>\n \n \n</head>\n<body>\n \n<label for=\"from\">From</label>\n<input type=\"text\" id=\"from\" name=\"from\">\n<label for=\"to\">to</label>\n<input type=\"text\" id=\"to\" name=\"to\">\n \n</body></html>\n </template>\n\n <script>\n$( function() {\nvar dateFormat = \"mm/dd/yy\",\nfrom = $( \"#from\" )\n.datepicker({\ndefaultDate: \"+1w\",\nchangeMonth: true,\nnumberOfMonths: 3\n})\n.on( \"change\", function() {\nto.datepicker( \"option\", \"minDate\", getDate( this ) );\n}),\nto = $( \"#to\" ).datepicker({\ndefaultDate: \"+1w\",\nchangeMonth: true,\nnumberOfMonths: 3\n})\n.on( \"change\", function() {\nfrom.datepicker( \"option\", \"maxDate\", getDate( this ) );\n});\n\nfunction getDate( element ) {\nvar date;\ntry {\ndate = $.datepicker.parseDate( dateFormat, element.value );\n} catch( error ) {\ndate = null;\n}\n\nreturn date;\n}\n} );\n </script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":540,"y":980,"wires":[["f94e121cbfa7f1c5"]]},{"id":"fb256f6c662bd279","type":"ui-group","name":"DETAIL","page":"c8690e5bce80ab2a","width":5,"height":"1","order":5,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"c8690e5bce80ab2a","type":"ui-page","name":"ANALYSIS","ui":"0aa5ac292a3ec726","path":"/analysis","icon":"database-eye","layout":"flex","theme":"b0fed2b0e19988c3","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":"24"}],"order":4,"className":"","visible":"true","disabled":"false"},{"id":"0aa5ac292a3ec726","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":false,"acceptsClientConfig":["ui-notification","ui-control","ui-form","ui-text-input","ui-number-input","ui-file-input","ui-button","ui-button-group","ui-radio-group","ui-slider","ui-switch","ui-text","ui-table","ui-chart","ui-gauge","ui-markdown","ui-template","ui-tabulator"],"showPathInSidebar":true,"showPageTitle":true,"navigationStyle":"temporary","titleBarStyle":"fixed","showReconnectNotification":true,"notificationDisplayTime":"1","showDisconnectNotification":true},{"id":"b0fed2b0e19988c3","type":"ui-theme","name":"MyTheme","colors":{"surface":"#000000","primary":"#059bd6","bgPage":"#050505","groupBg":"#303030","groupOutline":"#297500"},"sizes":{"density":"default","pagePadding":"2px","groupGap":"10px","groupBorderRadius":"10px","widgetGap":"2px"}}]

```

---

<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:** [20 March 2025 15:52 UTC](https://discourse.nodered.org/t/ui-form-to-get-from-and-to-dates/95283/3 "2025-03-20T15:52:25Z")

</div>

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