{"id":1585,"date":"2015-02-18T00:45:36","date_gmt":"2015-02-17T16:45:36","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1585"},"modified":"2017-12-14T14:32:58","modified_gmt":"2017-12-14T06:32:58","slug":"time-menu-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-menu\/time-menu-4-3-2\/","title":{"rendered":"Date\/Time Range Picker (4.3.2)"},"content":{"rendered":"

This article applies to versions 4.3.2 and earlier of P2 Explorer. For help on the latest version of the date\/time range picker, see Date\/Time Range Picker<\/a>.<\/p>\n

This article describes how to add a Date\/Time Range\u00a0Picker control to a page during the page design process. For details on how to use the Date\/Time Range\u00a0Picker\u00a0during run time, see: Using Time Pickers<\/a>.<\/p>\n\n

Overview<\/h3>\n

The Date\/Time Range Picker\u00a0provides 2 date\/time pickers, and lets the user select two different date\/times. These are usually used to provide a start time and end time for other controls on the page, such as a chart or trend.<\/p>\n

The user can select the start time to be a specific date or time, or they can specify a duration that precedes the end time (e.g. 12 hours from the end time).<\/p>\n

The user can specify the end time as a specific date and time, or select the current date and time (i.e. \"Now\").<\/p>\n

The following diagram shows a Date\/Time Range Picker\u00a0control being configured:<\/p>\n

\"\"<\/a><\/p>\n

\u00a0<\/div>\n\n\n\n\n
Start Date\/Time<\/strong>:<\/td>\nThe start of the time\u00a0range that is initially displayed when the page first loads. This is displayed on the left. This must be created as an\u00a0event<\/a> with a type of Datetime<\/em>. By default, this event is called startTime.<\/em> You can choose a date and time using the date picker.\u00a0<\/em><\/td>\n<\/tr>\n
End Date\/Time<\/strong>:<\/td>\nThe end of the time\u00a0range that is initially displayed when the page first loads. This is displayed on the right. This must also be created as an\u00a0event<\/a> with a type of Datetime.<\/em> By default, this event is called endTime.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

Tutorial<\/h3>\n

The Date\/Time Range Picker\u00a0is a useful control that enables users to change the type of data that is returned to other controls on a page.<\/p>\n

In this tutorial, we'll look at adding a Date\/Time Range Picker\u00a0that will change what is displayed on a chart<\/a> as the user selects different times.<\/p>\n

\"timemenulive\"<\/a><\/p>\n

Let's go through this process, step-by-step.<\/p>\n

\n

Step by Step: Creating a Time Menu\u00a0that Drives a Line\u00a0Chart<\/h3>\n

Before you start, open a new tab in Explorer and click the \u201cCreate a New Page in Studio Mode\u201d thumbnail. Choose the grid<\/a>\u00a0layout - you can adjust the rows and columns if you like but it's not important for this exercise.<\/p>\n

If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.<\/p>\n

Step 1. Add the Date\/Time Range Picker\u00a0to the page<\/strong><\/p>\n

\"\"<\/a><\/p>\n

Drag and drop the Date\/Time Range Picker component\u00a0onto a grid cell.<\/p>\n

\u00a0<\/p>\n

\u00a0Step 2.\u00a0\u00a0Configure the Date\/Time Range Picker<\/strong><\/p>\n

\"\"<\/a><\/p>\n

By default, the Date\/Time Range Picker\u00a0uses events to configure all its options. In fact, you'll notice that the\u00a0events all come preconfigured with event names. This is because these events are so often used, and by other controls on the page, that it's often unnecessary to bother changing the names. It's best to leave the names as is, but you can change them if you want. If you do change them, you'll need to remember this for the next steps.<\/p>\n

\u00a0<\/p>\n

\u00a0Step 3.\u00a0\u00a0Create the events<\/strong><\/p>\n

\"\"<\/a><\/p>\n

This step provides the hooks for the Date\/Time Range Picker\u00a0to send and receive signals to and from other controls on the page.<\/p>\n