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