Datepicker Widget

Last published at: August 3rd, 2022


Date picket widget lets user select a date and/or time using the control.  The Date widget stores the data as ISO format in JS.


  • Input Size - Select between any of the display size (mini, small, medium, large)
  • ID/Name - Name of widget generated by FlowWright (read-only field)
  • Use Default Date - Select checkbox to display current date (tick mark)
  • Use Time - Select checkbox to display current time (tick mark)
  • Required - Select checkbox for mandatory (tick mark) 
  • Hide - Select checkbox to Hide (tick mark) 
  • Read Only - Select checkbox to Read-Only (tick mark)
  • Minimum Date - Provide the minimum date for the date range
  • Maximum Date - Provide the maximum date for the date range  
  • Tool Tip - Enter information to display on mouse hover on form render
  • Styles - Enter the CSS scripts for widget styles
  • Apply Classes - Select between custom classes defined 
  • Save - Save the input values 
  • Delete - Remove this form widget from the designer page 
  • Close - Close the input popup window



Let’s build and execute the DatepickerDef example.  

  • Create a new form definition called “DatepickerDef
  • Select the Open Designer checkbox and click the “Create” button
  • Drag a Datepicker widget to the canvas
  • Double-click on the widget to configure the inputs as shown in the below graphic

  • Click on the "Use Default Date" checkbox to consider the current date 
  • Click on the "Use Time" checkbox to consider the current time
  • Provide the date range to accept dates between minimum date and maximum date 
  • Click on Save button and Close the popup window
  • Navigate to UI menu and Preview the form. The rendered widget will look as shown in the below graphic

  • The date selection is limited to the date range defined.