ON THIS PAGE:
Overview
The Date Picker component allows a user to select a date.
This will either set a startTime and endTime variable (as a 24-hour time range), or set a startTime (at the selected date), or set an endDate variable (at 24 hours after the selected date) - all depending on how you configure the component.
The user picks a start date, which updates the Start Date/Time and Explorer adds 24 hours to update the End Date/Time. If Start Date/Time and End Date/Time use variables, these can be used to refresh date-related data on the page.
In display mode, the Date Picker displays a date on the page, with a calendar. Click the calendar icon to open a date selector, from which you can pick a new date.
Use this component to set the page variables startTime and endTime if you want a user to select a date/time for fetching tags and attributes.
The Date Picker Component
The Date Picker has two dates: Start Date/Time and End Date/Time. By choosing between Variables or fixed Datetime values, for one or both of these dates, you can use the Date Picker to update one or more Datetime variables which in turn affects data on other page components.
| Start Date/Time: | The date that is displayed on the control in live mode, representing the beginning of the time range. If this is defined as a Variable, then it updates to the selected date, every time a user selects a date from Date Picker. The time is not updated. |
| End Date/Time: | The finish of the date range. If this is defined as a Variable, then it updates to 24 hours after the selected date, every time a user selects a date from Date Picker. |
| Style: | The style you want to apply to the component. If you are a Style Administrator, you can create a new Date Picker style. |
You should set at least one of the dates to use a variable, otherwise the component has no effect on the page at all.
Tutorials
If you're unfamiliar with the process of building pages, read the article Building an Explorer Page.
The following three tutorials demonstrate how you can configure the Date Picker to set one or two separate variables. Work through the Tutorial 1 first.
- Tutorial 1: Set a Start Time and End Time Variable
- Tutorial 2: Set a Start Date Variable
- Tutorial 3: Set an End Date Variable
Tutorial 1: Set a Start Time and End Time Variable
In this tutorial we'll build a new page from the Date Time Tutorials page. We'll add a Date Picker component that uses the page default values for startTime and endTime.
Step 1. Prepare the Tutorial Page
Before you start the tutorial, prepare a new date/time tutorial page. If you have already created a "Date/Time Tutorials" page, then open this. Otherwise follow the instructions in Date Time Tutorials to add the page.
Note how the text labels and tags use two of the page defaults, startTime and endTime, respectively.
Step 2. Save as a New Tutorial Page
Save the page as "Date Time Tutorials - Date Picker" in your private workspace, My Workspace.
1. Click the Save As.. 
button on the Studio toolbar.
2. In the dialog that appears, type in Date Time Tutorials - Date Picker, and keep the default Workspace, My Workspace.
3. Click Save.
Step 3. Add a Date Picker
1. Drag a Date Picker component onto top right of the Precision Layout. The Date Picker is in the Time 
group.
2. Click on the Current Date/Time Toggle component to review it.
There is no need to change any of the properties as they are preconfigured to use the Page Defaults startTime and endTime, respectively.
Remember that these variables are also used in the text labels and tags, so you'll be able to observe how they change when you select a new date from the date picker.
Tip: Open the Default Values page and update the time in startTime to 12:00 AM.
Try out the New Component
- Click the Preview
button on the Studio toolbar to see what your page will look like in run-time. - Select 4 April 2016 from the Date Picker.
Note how the Start Time and End Time text labels update, as well as the tag values using startTime and endTime, respectively.
startTime date updates to the date selected from the Date Picker. endTime date updates to one day later than the date selected from the Date Picker. The time on each is unaffected.
Tutorial 2: Set a Start Date Variable
Using the page saved in Tutorial 1, we'll configure the date picker to use a variable Start Date/Time and a fixed End Date time.
Step 1. Prepare the Tutorial Page
Open the page from Tutorial 1, Date Time Tutorials - Date Picker.
Step 2. Configure the Date Picker
Click the Date Picker component to configure it:
1. For Start Date/Time select Variable from the first drop-down list, and startTime from the second.
2. For End Date/Time select Datetime from the first drop-down list. In the date time box, click the calender icon and select a date: 8 April 2016.
Try out the Changed Component
- Click the Preview button on the Studio toolbar to see what your page will look like in run-time.
- Select 31 March 2016 from the Date Picker.
Note how the Start Time text label updates, as well as the tag value using startTime.
startTime date updates to the date selected from the Date Picker. endTime date is not updated, as the Date Picker has a fixed date for its End Date/Time; therefore the text label and tag which use this variable are unchanged.
Tutorial 3: Set an End Date Variable
Using the page saved in Tutorial 2, we'll configure the date picker to use a fixed Start Date/Time and a variable End Date time.
Step 1. Prepare the Tutorial Page
Open the page from Tutorial 1, Date Time Tutorials - Date Picker.
Step 2. Configure the Date Picker
Click the Date Picker component to configure it:
1. For Start Date/Time select Datetime from the first drop-down list. In the date time box, click the calender icon and select a date: 1 Jan 2016.
2. For End Date/Time select Variable from the first drop-down list, and startTime from the second.
Try out the Changed Component
- Click the Preview button on the Studio toolbar to see what your page will look like in run-time.
- Select 13 April 2016 from the Date Picker.
Note how the End Time text label updates, as well as the tag value using endTime.
endTime date updates to one day later than the date selected from the Date Picker. startTime date is not updated, as the Date Picker has a fixed date for its Start Date/Time; therefore the text label and tag which use this variable are unchanged.
