Date Range Selector

Description

The Date Range Selector control is a Dropdown Box control with pre-defined date ranges that can be used to populate controls containing a Start Date and End Date.

Discussion

The Date Range Selector control is useful if your UX component has controls where the user must enter a start date and an end date.

In the image below, the Date Range Selector shows the list of date ranges. The user has selected the 'This Year-to-date' range and the two input controls (one for date start, the other for date end) have been filled in.

To add a Date Range Selector, select the control from the Defined Controls section of the UX toolbox:

Connecting the Start Date and End Date Controls

After inserting the Date Range Selector into the UX Component, you must update the JavaScript in the onChange event with the ID for the Start Date and End Date controls. The Start Date and End Date controls should be text boxes with a Type of 'date'.

//fill in the name of the controls where the start date and end date should be inserted
var idStartDate = '';
var idEndDate = '';
if(idStartDate == '' || idEndDate == '') { 
	alert('Error: You have not specified the Ids of the start and end date controls. Edit this control\'s onChange event and define the ids.');
	return false;
};

//...

Creating the Start Date and End Date Controls

If the UX does not contain controls for the start and end date, you can quickly add them using the 'Create multiple new controls at once' option when inserting a [TextBox] control:

Field syntax can be used to define the data type of each textbox in the New Control dialog. The following will create two date controls named "StartDate" and "EndDate" on the same line:

StartDate|D,EndDate|D

Once the controls have been added, the onChange event for the Date Range Selector can be updated with the controls for the Start Date and End Date:

//fill in the name of the controls where the start date and end date should be inserted
var idStartDate = 'StartDate';
var idEndDate = 'EndDate';
if(idStartDate == '' || idEndDate == '') { 
	alert('Error: You have not specified the Ids of the start and end date controls. Edit this control\'s onChange event and define the ids.');
	return false;
};

//...