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

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

<\/p>\n

Overview<\/h3>\n

The Date\/Time Picker\u00a0allows the user to select a date and time for which to retrieve data. The initial displayed date\/time can be set to a specific date\/time value, or it can be specified as an event. This component is useful in cases when a production day or shift does not start and end at midnight, or if you want to view data values for a specific time of day.<\/p>\n

The following diagram shows the initial configuration of the Date\/Time Picker:<\/p>\n

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

\u00a0<\/div>\n\n\n\n
Date Time<\/strong>:<\/td>\nThe date\/time that is displayed by the control. You can choose a date and time using the date\/time picker, however it's a good idea to create this as an\u00a0event<\/a>\u00a0so other components on the page can use this.\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Tutorial<\/span><\/h3>\n
\n

The Date\/Time Picker\u00a0is a useful component that enables users to view data at a specific date and at a specific time. It is more commonly used with timeseries data than with datasets.<\/p>\n

In this tutorial, we\u2019ll look at adding a Date\/Time Picker component that will display the Tubing Head Temperature of a well at the selected date and time. The temperature is shown below the Date\/Time Picker, as follows:<\/p>\n

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

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

\n

Step by Step: Displaying a Date\/Time Picker on a Page\u00a0<\/span><\/span><\/span><\/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 Precision\u00a0Layout<\/a>.<\/p>\n

You will need to adjust the configuration to suit your data at your site.<\/p>\n

Step 1. Add the\u00a0source data<\/strong><\/p>\n

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

Before we can display any\u00a0data on the page, \u00a0we need to add the source data.<\/p>\n