{"id":13123,"date":"2017-12-20T12:45:56","date_gmt":"2017-12-20T04:45:56","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=13123"},"modified":"2024-10-09T12:54:38","modified_gmt":"2024-10-09T04:54:38","slug":"date-picker","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/date-picker\/","title":{"rendered":"Date 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 Picker component allows a user to select a date.<\/p>\n

This will either set a startTime and endTime variable (as a 24-hour time range), or set a startTime (at the selected date), or set an endDate variable (at 24 hours after the selected date) - all depending on how you configure the component.<\/p>\n

The user picks a start date, which updates the Start Date\/Time and Explorer adds 24 hours to update the End Date\/Time. If Start Date\/Time and End Date\/Time use variables, these can be used to refresh date-related data on the page.<\/p>\n

In display mode, the Date Picker displays a date on the page, with a calendar. Click the calendar icon to open a date selector, from which you can pick a new date.<\/p>\n

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

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

Use this component to set the page variables startTime and endTime if you want a user to select a date\/time for fetching tags and attributes.<\/p>\n<\/div>\n

 <\/p>\n

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

\n

The Date Picker Component<\/h2>\n

The Date Picker has two dates: Start Date\/Time and End Date\/Time. By choosing between Variables or fixed Datetime values, for one or both of these dates, you can use the Date Picker to update one or more Datetime variables which in turn affects data on other page components.<\/p>\n

\"\"<\/a><\/p>\n\n\n\n\n\n
Start Date\/Time<\/strong>:<\/td>\nThe date that is displayed on the control in live mode, representing the beginning of the time range. If this is defined as a Variable<\/em>, then it updates to the selected date, every time a user selects a date from Date Picker. The time is not updated.<\/td>\n<\/tr>\n
End Date\/Time<\/strong>:<\/td>\nThe finish of the date range. If this is defined as a Variable<\/em>, then it updates to 24 hours after the selected date, every time a user selects a date from Date 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 Picker style<\/a>.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
<\/i>BEST PRACTICE<\/span><\/p>\n

You should set at least one of the dates to use a variable, otherwise the component has no effect on the page at all.<\/p>\n<\/div>\n

\n

Tutorials<\/h2>\n

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

The following three tutorials demonstrate how you can configure the Date Picker to set one or two separate variables. Work through the Tutorial 1 first.<\/p>\n