Hi,
I need a date picker, so I use ui-form with date option like so
How do I restrict the options for a minimum and maximum date ?
like feeding a 'minDate' 'maxDate' property
Not sure this can be done easily in the ui-form
Two choices use a custom template form
Or
Add a text input date picker and verify the date before merging it with form.
Example of second option
[{"id":"b82ed3a629bbb995","type":"ui-form","z":"d1395164b4eec73e","name":"","group":"ff7cbf009b7b3034","label":"","order":2,"width":0,"height":0,"options":[{"label":"test","key":"test","type":"text","required":true,"rows":null}],"formValue":{"test":""},"payload":"","submit":"submit","cancel":"clear","resetOnSubmit":false,"topic":"submit","topicType":"str","splitLayout":"","className":"","passthru":false,"dropdownOptions":[],"x":270,"y":5220,"wires":[["dffce3906df09f06"]]},{"id":"dffce3906df09f06","type":"join","z":"d1395164b4eec73e","name":"","mode":"custom","build":"merged","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","useparts":true,"accumulate":true,"timeout":"","count":"2","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":450,"y":5220,"wires":[["161c8b02e3f3fb58","d7b9a225093d2565"]]},{"id":"aaf53ebd784a56a6","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"move","p":"payload","pt":"msg","to":"payload[msg.topic]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":270,"y":5280,"wires":[["dffce3906df09f06"]]},{"id":"161c8b02e3f3fb58","type":"debug","z":"d1395164b4eec73e","name":"debug 2485","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":850,"y":5500,"wires":[]},{"id":"d7b9a225093d2565","type":"switch","z":"d1395164b4eec73e","name":"","property":"topic","propertyType":"msg","rules":[{"t":"eq","v":"submit","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":650,"y":5220,"wires":[["4ae4a4dd711e1b58"]]},{"id":"5e2edbaca45a0db4","type":"switch","z":"d1395164b4eec73e","name":"","property":"$number($replace($$.payload,\"-\",\"\"))","propertyType":"jsonata","rules":[{"t":"lte","v":"max_check","vt":"msg"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":650,"y":5340,"wires":[["aaf53ebd784a56a6"],["4177c412872af95c"]]},{"id":"4ae4a4dd711e1b58","type":"ui-template","z":"d1395164b4eec73e","group":"ff7cbf009b7b3034","page":"","ui":"","name":"","order":3,"width":0,"height":0,"head":"","format":"<template>\n <h3>Form Submission:</h3>\n <pre>{{ msg?.payload }}</pre>\n <label>Submitted by {{ msg?._client?.socketId }}</label>\n</template>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":840,"y":5220,"wires":[["161c8b02e3f3fb58"]]},{"id":"a340afcf50f8d57a","type":"switch","z":"d1395164b4eec73e","name":"","property":"check","propertyType":"msg","rules":[{"t":"gte","v":"min_check","vt":"msg"},{"t":"else"}],"checkall":"true","repair":false,"outputs":2,"x":450,"y":5340,"wires":[["5e2edbaca45a0db4"],["4f4e99f01b60d404"]]},{"id":"4177c412872af95c","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"max","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":680,"y":5380,"wires":[["3b3e49a908ec7047"]]},{"id":"77a252cd6a358308","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"min","pt":"msg","to":"2024-12-25","tot":"str"},{"t":"set","p":"max","pt":"msg","to":"2025-01-12","tot":"str"},{"t":"set","p":"check","pt":"msg","to":"$number($join($split($$.payload,\"-\"),\"\"))","tot":"jsonata"},{"t":"set","p":"min_check","pt":"msg","to":"$number($join($split($$.min,\"-\"), \"\"))","tot":"jsonata"},{"t":"set","p":"max_check","pt":"msg","to":"$number($join($split($$.max,\"-\"), \"\"))","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":5340,"wires":[["a340afcf50f8d57a"]]},{"id":"4f4e99f01b60d404","type":"change","z":"d1395164b4eec73e","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"min","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":460,"y":5380,"wires":[["3b3e49a908ec7047"]]},{"id":"3b3e49a908ec7047","type":"junction","z":"d1395164b4eec73e","x":20,"y":5380,"wires":[["45712dde4451dd49"]]},{"id":"45712dde4451dd49","type":"ui-text-input","z":"d1395164b4eec73e","group":"ff7cbf009b7b3034","name":"date","label":"date","order":1,"width":0,"height":0,"topic":"date","topicType":"str","mode":"date","tooltip":"","delay":300,"passthru":true,"sendOnDelay":true,"sendOnBlur":true,"sendOnEnter":false,"className":"","clearable":false,"sendOnClear":false,"icon":"","iconPosition":"left","iconInnerPosition":"inside","x":150,"y":5340,"wires":[["77a252cd6a358308"]]},{"id":"ff7cbf009b7b3034","type":"ui-group","name":"Form","page":"3bceecc44f91d26b","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"3bceecc44f91d26b","type":"ui-page","name":"Custom Form Submission","ui":"1805777f90e92057","path":"/form-submission","icon":"home","layout":"grid","theme":"35ee7753b5b3599b","order":2,"className":"","visible":true,"disabled":false},{"id":"1805777f90e92057","type":"ui-base","name":"dashboard ","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"titleBarStyle":"default"},{"id":"35ee7753b5b3599b","type":"ui-theme","name":"Theme Name","colors":{"surface":"#16234b","primary":"#1d44b9","bgPage":"#ecf2f8","groupBg":"#ffffff","groupOutline":"#cccccc"}}]
2 Likes
thanks for the guidance, will keep the second option for time being, but would like to have a template version for long run.
Is datepicker as a separate widget not in pipeline for DB2?
What would be the advantage of a separate widget?
so that ui-form can be kept simple, and any enhancement specific to date / time picker can be done in the date time picker.
I am not sure, as an end user, I would like to have a minimum, maximum restrictions in built in the widget, rather than having to put logic / write code at the user exit.
In html input type, min, max, default seems to be basic.
I am able to put this below in a template node, but not sure how to get output from the node. working on it.
I meant what would be the advantage of a specific node for date rather than as an option in the text input node.
It may be worth submitting a Feature Request for range to be added in the text node when used in date/time mode. Issues · FlowFuse/node-red-dashboard · GitHub
The dashboard team is very busy however so it may be a little time.
1 Like
un fortunately my GitHub account is inaccesible. the email ID I provided is no more operational, and i dont know how to change the same.
I will go with this solution for now, as I am unable to get a template node working. Is there a way to implement the same logic for time as well ?
EDIT: converted the example flow to time as well. replaced "-" with ":" in the jsonata formula.
