{"id":13127,"date":"2017-12-20T12:48:06","date_gmt":"2017-12-20T04:48:06","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=13127"},"modified":"2024-10-09T12:54:39","modified_gmt":"2024-10-09T04:54:39","slug":"time-menu","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-menu\/","title":{"rendered":"Date\/Time Range Picker"},"content":{"rendered":"\n

This article applies to versions 4.4 and later of IFS OI Explorer. For more, see Release History<\/a>.<\/p>\n

The Date\/Time Range Picker component allows a user to select two date\/times, or a duration (such as 1 month) with an end date\/time or \"Now\".\u00a0<\/p>\n

In version 4.13, the available duration time periods that can be selected have been expanded to include 3, 4, 5, 10 and 20 years.<\/p>\n

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

These date\/times are preconfigured to set the Page Default startTime<\/em> and endTime<\/em> variables, which in turn can be used for retrieving data such as trends or charts.<\/p>\n

The Date\/Time Range Picker provides two 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 range that precedes the end time (e.g. 12 hours from the end time). Either selection sets a Datetime variable.<\/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\"). Either selection sets a Datetime variable.<\/p>\n

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

Related: Using the Date\/Time Range Picker<\/a> in display mode, Adding a Date\/Time Range Picker style<\/a>,\u00a0Variables<\/a>,\u00a0Default Values<\/a><\/p>\n

\n

The Date\/Time Range Picker Component<\/h2>\n

In run-mode, the Date\/Time Range Picker displays a time range on the page, with From<\/strong> above To<\/strong>.<\/p>\n

If From<\/strong> can be displayed as a duration from the list of durations (such as 5 days, 1 week, 1 month, etc.) then it is displayed that way.<\/p>\n

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

Otherwise, it is displayed as a date\/time (for example if there is a 4 day duration - which is not in the list).<\/p>\n

\"\"<\/a><\/p>\n\n\n\n\n\n
Start Date\/Time<\/strong>:<\/td>\nThe start of the time range that is initially displayed when the page first loads. This is displayed on the top. This is a Datetime variable, preconfigured to use the page default, startTime.<\/em><\/td>\n<\/tr>\n
End Date\/Time<\/strong>:<\/td>\nThe start of the time range that is initially displayed when the page first loads. This is displayed on the bottom. This is a Datetime variable, preconfigured to use the page default, endTime.<\/em><\/td>\n<\/tr>\n
Style<\/strong>:<\/td>\nThe style you want to apply to the component. If you are a Style Administrator, you can create a new Date\/Time Range Picker style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
<\/i>BEST PRACTICE<\/span><\/p>\n

Start Date\/Time<\/strong> and End Date\/Time<\/strong> should use variables representing the start and end of a date range, such as the preconfigured startTime<\/em> and endTime<\/em> page default variables.<\/p>\n<\/div>\n

\n

Quick Start<\/h2>\n

You can add a date\/time range picker onto any Explorer page, in Studio mode. There is no need to change the configuration of the component.<\/p>\n

1. Open your page in Studio mode.<\/p>\n

2. Drag a date\/time range picker to the page, from the components panel, as shown in Step 3 of the tutorial below.<\/p>\n

3. See how this affects components on the page (see Step 5 of the tutorial below).<\/p>\n

For more detail, go through the tutorial below.<\/p>\n

\n

Tutorial: Date\/Time Range Picker Using Default Values<\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

In this tutorial, we'll add a page based on the \"Date\/Time Tutorials\" page. We'll add a date\/time range picker, and set this to 1 month before the current time.<\/p>\n

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

Note<\/strong>: This configuration uses the Sample Data <\/em>table\u00a0and datasets that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n

Step 1. Prepare the Tutorial Page<\/strong><\/p>\n

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<\/a> to add the page.<\/p>\n

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

 <\/p>\n

Step 2. Save as a New Tutorial Page<\/strong><\/p>\n

Save the page as \"Date Time Tutorials - Date Time Range Picker\" in your private workspace, My Workspace<\/em>.<\/p>\n

1. Click the Save As<\/strong>\u00a0\"\" button on the Studio toolbar.<\/p>\n

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

2. In the dialog that appears, type in Date Time Tutorials - Date Time Range Picker<\/strong>, and keep the default Workspace<\/strong>, My Workspace<\/em>.<\/p>\n

3. Click Save<\/strong>.<\/p>\n

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

 <\/p>\n

Step 3. Add a Date\/Time Range Picker<\/strong><\/p>\n

1. Drag a Date\/Time Range Picker component onto top right of the Precision Layout, as shown. The Date\/Time Range Picker is in the Time \"timeicon_sm\"\u00a0group. Click and drag the borders to resize.<\/p>\n

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

2. Click on the Current Date\/Time Toggle component to review it.<\/p>\n

There is no need to change any of the properties as they are preconfigured to use the Page Defaults startTime and endTime, respectively.<\/p>\n

Remember that these variables are also used in the text labels and tags on this page, so you'll be able to observe how they change when you select a new date from the date picker.<\/p>\n

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

 <\/p>\n

Step 4. Select a From Date (Duration)<\/strong><\/p>\n

1. Preview the page, so you can select a From<\/strong> duration (click the Preview\u00a0\"preview\" button on the Studio toolbar).<\/p>\n

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

2. Click the down arrow \"\" then select 1 month<\/em> from the drop-down list.<\/p>\n

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

3. Click the Preview\u00a0\"preview\" button on the Studio toolbar, to return to design mode.<\/p>\n

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

The date\/time range picker is configured to From<\/strong> 1 month<\/em> To<\/strong> 12 April 2016 10:17:15 AM<\/em> (or current time).<\/p>\n

\u00a0<\/p>\n

Try out the New Component<\/strong><\/p>\n