{"id":13115,"date":"2017-12-20T12:41:26","date_gmt":"2017-12-20T04:41:26","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=13115"},"modified":"2024-10-09T12:54:38","modified_gmt":"2024-10-09T04:54:38","slug":"time-picker","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/time-picker\/","title":{"rendered":"Date\/Time 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

Overview<\/h2>\n

The Date\/Time Picker component allows a user to select a date and time, which updates the Date Time property.<\/p>\n

This is preconfigured to set the Page Default endTime<\/em> variable, which in turn can be used for retrieving data (read about Page Defaults<\/strong> in the Default Values<\/a> help).<\/p>\n

In display mode, the Date\/Time Picker displays a date and time on the page. Click the calendar icon \"calendaricon\" to open a date selector, or the clock \"clock-icon\" icon to select a time.<\/p>\n

\"dtpicker-date\"<\/p>\n

<\/i>BEST PRACTICE<\/span><\/p>\n

Use this component to set the page variable endTime<\/em> if you want a user to select a date\/time for fetching tags and attributes. Tags and attributes have endTime<\/em> as their preconfigured Time<\/strong> when they are dragged onto a page.<\/p>\n<\/div>\n

 <\/p>\n

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

\n

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

The Date\/Time Picker has a single property to configure: Date Time.<\/p>\n

\"\"<\/a><\/p>\n\n\n\n\n
Date Time<\/strong>:<\/td>\nThe date and time displayed on the control in live mode. If this is defined as a Variable<\/em>, then it updates to the selected date and time, every time a user selects a date or time from Date\/Time Picker.<\/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 Picker style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
<\/i>BEST PRACTICE<\/span><\/p>\n

Leave Date Time as a variable. If the user picks a date and time, they will expect it to affect data on the page, and this can only happen if you are using a variable.<\/p>\n<\/div>\n

\n

Quick Start<\/h2>\n

You can add a date\/time picker onto any Explorer page, in Studio mode.<\/p>\n

<\/i>BEST PRACTICE<\/span><\/p>\n

Be aware of what other date and time components already exist on a page, as these often share the same variables, and may affect or be affected by your new component.<\/p>\n<\/div>\n

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

2. Add a date\/time picker to the page, as shown in Step 4 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 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 build a new page from the Date Time Tutorials<\/em> page. We'll add a Date\/Time Picker component and see how that affects the Text Label and Tag value on the page.<\/p>\n

Note<\/strong>: There is no need to change the preconfigured settings of the date\/time picker in this tutorial.<\/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

Note how the text labels and tags use two of the page defaults, startTime<\/em> and endTime<\/em>, respectively.<\/p>\n

\u00a0<\/p>\n

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

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

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

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

2. In the dialog that appears, type in Date Time Tutorials - Date Time 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. Remove the Start Time Text Label and Tag<\/strong><\/p>\n

In this tutorial we're only observing the endTime<\/em> variable changes, so start by removing the text label and data label (showing tag value), that use the startTime<\/em> variable.<\/p>\n

You can skip this step if you prefer.<\/p>\n

1. Click on the text label on the left, Start Time<\/em>, then press the Delete key to remove it.<\/p>\n

2. Click on the data label on the left, then press the Delete key to remove it.<\/p>\n

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

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

1. Drag a Date\/Time Picker component onto top right of the Precision Layout.\u00a0The Date\/Time Picker\u00a0is in the Time \"timeicon_sm\"<\/a>\u00a0group.<\/p>\n

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

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

There is no need to change any of the properties as this is preconfigured to use the Page Defaults endTime<\/em>.<\/p>\n

Remember that the endTime<\/em> variable is also used in the text label and tag, so you'll be able to observe how these change when you select a new date and time from the date\/time picker.<\/p>\n

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

 <\/p>\n

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