This article describes how to add a Date/Time Picker control to a page during the page design process. For details on how to use the Date/Time Picker during run time, see: Using Time Pickers.
Overview
The Date/Time Picker allows 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.
The following diagram shows the initial configuration of the Date/Time Picker:
| Date Time: | The 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 event so other components on the page can use this. |
Tutorial
The Date/Time Picker is 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.
In this tutorial, we’ll 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:
Let’s go through this process, step-by-step.
Step by Step: Displaying a Date/Time Picker on a Page
Before you start, open a new tab in Explorer and click the “Create a New Page in Studio Mode” thumbnail. Choose the Precision Layout.
You will need to adjust the configuration to suit your data at your site.
Step 1. Add the source data
Before we can display any data on the page, we need to add the source data.
- Below the canvas, click the button labelled "Add Data".
- Choose the data you are going to use. For this tutorial, we are creating a time series dataset, so select Model and then click "Add".
- In the configuration options, specify the following:
- Name: THTemp
- Using: Entities
- Entities: (List) Earl
- Template: Oil Producing Well
- Attribute: THT!Actual (click Add after selecting the attribute)
- Group By: None
- SampleInterval: (Number) 86400
- SampleMethod: (Text) Average
- StartTime: (Event) time
- EndTime: (Event) time
In this example, we are going to use the same start time and end time, because we want to display the value at a particular date and time.
Step 2. Add the Date/Time Picker to the page
Drag and drop the Date/Time Picker component onto the page, and resize it appropriately using the drag handles.
Step 3. Configure the Date/Time Picker component
Use the defaults, as follows:
- Date Time: (Event) time
This event will feed the time into the dataset that we previously added.
Step 4: Add and configure a Data Label
Add a Data Label component to the page and configure it as follows:
- Source Data: THTemp
- Value Column: (Text) Value
- Decimals: (Number) 5
Step 5. All done!
Great work! You now have a fully functioning Date/Time Picker that displays the Tubing Head temperature of a well at a date and time that the user selects.
- Click the preview
button on the Studio toolbar to see what your page will look like in run-time. - Change the date and time to see the temperature value change.
Don’t forget to save your page!