{"id":1413,"date":"2015-02-12T16:46:35","date_gmt":"2015-02-12T08:46:35","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=1413"},"modified":"2017-12-14T14:32:30","modified_gmt":"2017-12-14T06:32:30","slug":"date-picker-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-picker\/date-picker-4-3-2\/","title":{"rendered":"Date 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 picker, see Date Picker<\/a>.<\/p>\n

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

Overview<\/h3>\n

The Date Picker is used to select a date for which to retrieve data. The date is usually a 24-hour time\u00a0range (midnight to midnight), but can be configured to start and end at a different time (e.g. 1am to 1am), or can even be shorter than 24 hours (e.g. 1am to 1pm).<\/p>\n

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

\u00a0\"datepickerconfig\"<\/a><\/div>\n\n\n\n\n
Start Date<\/strong>:<\/td>\nThe date that is displayed on the control in live mode, representing the beginning of the time range. This is used to set the date on the control when the page is first loaded. You can choose the date and time separately, however it's normally used to specify a time period of midnight-midnight. If defined as an event, Start Date can both publish the event or\u00a0subscribe to an event.<\/td>\n<\/tr>\n
End Date<\/strong>:<\/td>\nThe finish of the date range, which should be at most 24 hours after the start date. If this is more than 24 hours from the start date, the end date is ignored and it defaults to 24 hours later.\u00a0If defined as an event, End\u00a0Date can both publish the event or\u00a0subscribe to an event.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Tutorial<\/h3>\n

The Date\u00a0Picker is 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\u00a0Picker that will change what is displayed on a chart as the user selects different dates.<\/p>\n

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

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

\n

Step by Step: Creating a Date\u00a0Picker that 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\u00a0Picker to the page<\/strong><\/p>\n

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

Drag and drop the Date\u00a0Picker\u00a0control onto a grid cell.<\/p>\n

\u00a0<\/p>\n

Step 2.\u00a0\u00a0Configure the Date\u00a0Picker<\/strong><\/p>\n

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

By default, the Date\u00a0Picker uses 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.<\/p>\n

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

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

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

This step provides the hooks for the Date\u00a0Picker to send and receive signals (events<\/a>) to and from other controls on the page.<\/p>\n