Description:
The date picket widget lets users select a date and/or time using the control. The Date widget stores the data in ISO format in JS.
Inputs
- Input Size - Select between any of the display sizes (mini, small, medium, large)
- ID/Name - Name of widget generated by FlowWright (read-only field)
- Use Default Date - Select the checkbox to display the current date (tick mark)
- Use Time - Select the checkbox to display the current time (tick mark)
- Required - Select the checkbox for mandatory (tick mark)
- Hide - Select the checkbox to Hide (tick mark)
- Read Only - Select the 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
Design:
Example:
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 the Save button and Close the popup window
- Navigate to the UI menu and Preview the form. The rendered widget will look as shown in the graphic below. The date selection is limited to the date range defined.
