The Date Range Picker control in the Studio is a composite control that gives two outputs - start date and end date used to accept a range of dates from the user in the microapp from a calendar widget. It has various properties, which enable you to select time also.
The Date Range Picker control saves the Date & Time in timestamp in millisec format. It can be used for various purposes like accepting appointments.
UI Properties
Info
-
Unique Name: A Unique Name is used to uniquely identify a control in your App. Every control that is added on the screen gets an auto-generated Unique Name on the basis of the Label name given to the control. This control has two unique names one for the start date
daterangepicker.StartDateand one for the end datedaterangepicker.EndDate. -
Label: The text that is displayed helps the user to understand the type of control it represents.
-
Tooltip: The option to add tooltip text as a hint to the user. It is visible when you switch on the visibility toggle property.
-
Description: The option to provide a description that you can add for your control. It is visible when you switch on the visibility toggle property.
-
External CSS: With this property, one can imply exclusive CSS on controls. You can customize your control with CSS by selecting the correct class or id of the control. You can read more here.
-
Caching: When the caching option is selected and if a LOOKUP formula is applied to this control, the value that the LOOKUP returns will be cached and the user will be able to see this value in the fields even when he accesses the microapp later with no connectivity. This option is required when you want your app to be accessible in offline mode as well and getting the latest data from the sheets is not always critical.
-
Hidden: The hidden option helps to hide control from the user. This helps when you don’t want the user to view the control.
-
Trigger Dependents: When you Disable Trigger Dependents, it helps you to reduce or optimize the unnecessary evaluation of the dependent control’s formula. For a detailed explanation refer to this article here. By default, Trigger dependents are enabled. However, in complex apps by switching it off, you would limit the evaluation in the dependent control and in turn ensure quicker response times.
-
Hide on desktop: This option hides the selected control in the desktop view.
-
Hide on Mobile: This option hides the selected control in the mobile view.
-
Dynamic Height: This option dynamically increases /decreases the height of the text control based on the given content.
-
Maintain space when hidden: This option maintains the specified space between controls when a particular control is hidden. When control is hidden the space is maintained in the preceding control depending on the space the previous control has occupied.
-
Note: Hide on desktop, Hide on Mobile, Dynamic Height and Maintain space when hidden are
available in Basic Freeflow Editor Only.
Input Properties
-
Submit format : This lets you choose between the Local time zone and UTC for displaying the Date & Time.
-
Date format: This lets you choose the format you want the date to be displayed in. There are 3 formats available:
-
Friendly format - Month DD YYYY
-
European format - DD/MM/YYYY
-
US format - MM/DD/YYYY
-
-
Min Date: You can provide a date with this property, before which the dates won’t be available to select from the control.
-
Max Date: You can provide a date with this property, beyond/ after which the dates won’t be available to select from.
(Max/Min Date format must match with the Date format applied from the Input Property)
-
Enable Time: This toggle will enable you to take time also as inputs from the end user, and when toggled on you can select the time format too.
-
Min Time: You can provide a time with this property, before which the time won’t be available to select from the control. It is applied on the min date only and can be in any format (12hrs/24hrs)
-
Max Time: You can provide a time with this property, beyond/ after which the time won’t be available to select from the control. It is applied on the max date only and can be in any format (12hrs/24hrs)
-
Enable Shortcut: This toggle enables the user to select from certain already available sets of date ranges, like a week before, a month and more.
Date Range Properties
This section is for deciding color themes for the control and calendar widget.
How to use Date Range Picker control
Select Date Range Picker under Custom section from Controls.
Bind data to Date Range Picker control
Under the Bind Data, we get various options to bind our Date Range Picker control with data, such as sheets, controls, variables, connectors, and more. You will have two options: Start Date and End Date.
The expected and best practice format to bind data is UNIX and “MM/DD/YYYY”.
