Datepicker Widget

Last published at: August 3rd, 2022

Description:

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