{"id":15539,"date":"2018-01-03T10:39:19","date_gmt":"2018-01-03T02:39:19","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=15539"},"modified":"2024-06-06T11:57:09","modified_gmt":"2024-06-06T03:57:09","slug":"using-time-pickers","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-time-pickers\/","title":{"rendered":"Using Time Pickers"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.4 and later of IFS OI Explorer. For more, see <a href=\"#Release_History\">Release History<\/a>.\u00a0<\/p>\n<h2 class=\"page-subheading\"><span id=\"Overview\">Overview<\/span><\/h2>\n<p class=\"intro-text\">IFS OI Explorer pages are interactive, allowing you to select different dates or periods for the data being displayed on your page.<\/p>\n<p class=\"intro-text\">This article describes how you can make some of these selections on an Explorer page.<\/p>\n<p class=\"intro-text\">Depending on the page design, you could have any of the following time pickers available:<\/p>\n<ul class=\"intro-text\">\n<li>Current Date\/Time Toggle<\/li>\n<li>Date Picker<\/li>\n<li>Date\/Time Picker<\/li>\n<li>Date\/Time Range Picker<\/li>\n<li>Duration Picker<\/li>\n<li>Month Picker<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Current Date\/Time Toggle<\/h2>\n<p class=\"intro-text\">The Current Date\/Time Toggle (called the 'Now' button in previous versions of IFS OI Explorer) is used to display the data on the page at the current date and time. It appears as a simple square check box, and will often be used in conjunction with another time picker control.<\/p>\n<p class=\"intro-text\">The current date\/time toggle affects the data displayed on the page by providing the current date\/time to other controls on the page.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/now.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7943\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/now.png\" alt=\"now\" width=\"18\" height=\"18\" \/><\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>How to use the Current Date\/Time Toggle<\/strong><\/p>\n<p class=\"intro-text\">The Current Date\/Time Toggle has an <em>on<\/em> or <em>off<\/em> state.<\/p>\n<table>\n<tbody>\n<tr>\n<td><strong>On<\/strong><\/td>\n<td><strong>Off<\/strong><\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/now.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7943\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/now.png\" alt=\"now\" width=\"18\" height=\"18\" \/><\/a><\/td>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/nowoff.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7944\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/nowoff.png\" alt=\"nowoff\" width=\"18\" height=\"18\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td><em>Select the check box to select the current date and time. In doing this, any dates and times specified in other time pickers on the page, will be ignored.<\/em><\/td>\n<td><em>Clear the check box to turn the current date and time off. Doing this will revert the data to the date and time specified by a different time picker on the page.<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<h2 id=\"Date-Picker\" class=\"page-subheading\">Date Picker<\/h2>\n<p class=\"intro-text\">The date picker allows you to specify a date for the data on the page. The page designer may have specified a default date, so the page will always display data for that date when it is first opened.<\/p>\n<p class=\"intro-text\">The date picker affects the data displayed on the page by providing the date to other controls on the page.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickershow.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8042\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickershow.png\" alt=\"datepickershow\" width=\"107\" height=\"23\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickershow.png 107w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickershow-24x5.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickershow-36x8.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickershow-48x10.png 48w\" sizes=\"auto, (max-width: 107px) 100vw, 107px\" \/><\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>How to use the Date Picker<\/strong><\/p>\n<p class=\"intro-text\">You can change the date in 2 ways:<\/p>\n<ul class=\"intro-text\">\n<li>Click in the date field and type the new date. The format depends on the locale of your browser e.g. dd\/mm\/yyyy<\/li>\n<li>Click the calendar icon <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/calendaricon.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8003\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/calendaricon.png\" alt=\"calendaricon\" width=\"12\" height=\"14\" \/><\/a> and then click through to choose the date. To change the month or year, click the top bar and select the appropriate month and year.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7994\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepicker611.png\" alt=\"datepicker611\" width=\"219\" height=\"272\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepicker611.png 219w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepicker611-121x150.png 121w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepicker611-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepicker611-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepicker611-39x48.png 39w\" sizes=\"auto, (max-width: 219px) 100vw, 219px\" \/> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-7995\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickermonth.png\" alt=\"datepickermonth\" width=\"212\" height=\"264\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickermonth.png 212w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickermonth-120x150.png 120w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickermonth-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickermonth-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datepickermonth-39x48.png 39w\" sizes=\"auto, (max-width: 212px) 100vw, 212px\" \/><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Date\/Time Picker<\/h2>\n<p class=\"intro-text\">The date\/time picker affects the data displayed on the page by providing the date and time to other controls on the page. The page designer may have specified a default date\/time, so the page will always display data for that date and time when it is first opened.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datetimepicker.png\" rel=\"lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8043\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datetimepicker.png\" alt=\"datetimepicker\" width=\"252\" height=\"31\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datetimepicker.png 252w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datetimepicker-150x18.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datetimepicker-24x3.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datetimepicker-36x4.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/datetimepicker-48x6.png 48w\" sizes=\"auto, (max-width: 252px) 100vw, 252px\" \/><\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>How to use the Date\/Time Picker<\/strong><\/p>\n<p class=\"intro-text\">You can change the date and time in the following ways:<\/p>\n<ul class=\"intro-text\">\n<li>Click in the date\/time field and type the new date time. The format depends on the locale of your browser e.g. dd\/mm\/yyyy hh:mm:ss<\/li>\n<li>Click the calendar icon <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/calendaricon.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8003\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/calendaricon.png\" alt=\"calendaricon\" width=\"12\" height=\"14\" \/><\/a> and then click through to choose the date. Refer to the <a href=\"#Date-Picker\">Date Picker<\/a> above.<\/li>\n<li>Click the clock <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/clock-icon.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8066\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/clock-icon.png\" alt=\"clock-icon\" width=\"14\" height=\"14\" \/><\/a> icon and choose a time from the drop-down list.<\/li>\n<li>Click the down arrow <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/down-arrow.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8067\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/down-arrow.png\" alt=\"down-arrow\" width=\"8\" height=\"4\" \/><\/a> and choose 'Now' to specify the current date and time.<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15545 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choosing-the-date.png\" width=\"238\" height=\"268\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choosing-the-date.png 238w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choosing-the-date-133x150.png 133w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choosing-the-date-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choosing-the-date-32x36.png 32w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choosing-the-date-43x48.png 43w\" sizes=\"auto, (max-width: 238px) 100vw, 238px\" \/><\/p>\n<\/td>\n<td>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15544 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choose-time.png\" width=\"246\" height=\"248\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choose-time.png 246w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choose-time-150x150.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choose-time-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choose-time-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/choose-time-48x48.png 48w\" sizes=\"auto, (max-width: 246px) 100vw, 246px\" \/><\/p>\n<\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8044\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-now.png\" alt=\"dtpicker-now\" width=\"280\" height=\"85\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-now.png 280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-now-150x46.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-now-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-now-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-now-48x15.png 48w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><\/td>\n<\/tr>\n<tr>\n<td><em>Choosing the date<\/em><\/td>\n<td><em>Choosing the time<\/em><\/td>\n<td><em>Selecting the current date and time<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Date\/Time Range Picker<\/h2>\n<p class=\"intro-text\">The date\/time range picker allows you to set the start and end time for the data you want to display on the page. The page designer may have specified a default time range, so the page will always display data for that range when it is first opened.<\/p>\n<p class=\"intro-text\">The date\/time range picker affects the data displayed on the page by providing the start date\/time and end date\/time to other controls on the page.<\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15554 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-overview.png\" width=\"276\" height=\"86\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-overview.png 276w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-overview-150x47.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-overview-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-overview-36x11.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-overview-48x15.png 48w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\" \/><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>How to use the Date\/Time Range Picker<\/strong><\/p>\n<ul class=\"intro-text\">\n<li>You can specify the start time to be time period from the end date. E.g. The 12 hour period before midnight on the 7th November 2015.<\/li>\n<\/ul>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15548 size-medium\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-1-283x300.png\" width=\"283\" height=\"300\" \/><\/p>\n<ul class=\"intro-text\">\n<li>You can also select \"<strong>Choose start time<\/strong>\" to enter a specific start date and time.<\/li>\n<li>You can change the date for start and end dates in the following ways:\n<ul class=\"intro-text\">\n<li>Click in the date\/time field and type the new date time. The format depends on the locale of your browser e.g. dd\/mm\/yyyy hh:mm:ss<\/li>\n<li>Click the calendar icon <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/calendaricon.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8003\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/calendaricon.png\" alt=\"calendaricon\" width=\"12\" height=\"14\" \/><\/a> and then click through to choose the date. Refer to the <a href=\"#Date-Picker\">Date Picker<\/a> above.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15549 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-2.png\" width=\"270\" height=\"274\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-2.png 270w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-2-148x150.png 148w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-2-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-2-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-2-48x48.png 48w\" sizes=\"auto, (max-width: 270px) 100vw, 270px\" \/><\/p>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15550 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-3.png\" width=\"246\" height=\"290\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-3.png 246w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-3-127x150.png 127w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-3-20x24.png 20w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-3-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-3-41x48.png 41w\" sizes=\"auto, (max-width: 246px) 100vw, 246px\" \/><\/p>\n<ul class=\"intro-text\">\n<li>To change the time, click the clock <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/clock-icon.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8066\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/clock-icon.png\" alt=\"clock-icon\" width=\"14\" height=\"14\" \/><\/a> icon and choose a time from the drop-down list.<\/li>\n<\/ul>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15551 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-4.png\" width=\"248\" height=\"245\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-4.png 248w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-4-150x148.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-4-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-4-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-4-48x48.png 48w\" sizes=\"auto, (max-width: 248px) 100vw, 248px\" \/><\/p>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15552 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-5.png\" width=\"246\" height=\"264\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-5.png 246w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-5-140x150.png 140w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-5-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-5-34x36.png 34w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-5-45x48.png 45w\" sizes=\"auto, (max-width: 246px) 100vw, 246px\" \/><\/p>\n<ul class=\"intro-text\">\n<li>You can also set the end time to be the current date and time. Click the down arrow <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/down-arrow.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8067\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/down-arrow.png\" alt=\"down-arrow\" width=\"8\" height=\"4\" \/><\/a> and choose 'Now'.<\/li>\n<\/ul>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-15553 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-6.png\" width=\"261\" height=\"101\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-6.png 261w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-6-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-6-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-6-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/06\/date-time-range-picker-6-48x19.png 48w\" sizes=\"auto, (max-width: 261px) 100vw, 261px\" \/><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Duration Picker<\/h2>\n<p class=\"intro-text\">The duration picker allows you to specify a time period for the data to display on a page. It appears as a simple drop-down list from which you select a time period. The page designer may have specified a default duration, so the page will always display data for that time period when it is first opened.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-picker.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8057\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-picker.png\" alt=\"duration-picker\" width=\"60\" height=\"29\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-picker.png 60w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-picker-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-picker-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-picker-48x23.png 48w\" sizes=\"auto, (max-width: 60px) 100vw, 60px\" \/><\/a><\/p>\n<p class=\"intro-text\">The duration picker affects the data displayed on the page by providing the start time, end time, and duration to other controls on the page.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>How to use the Duration Picker<\/strong><\/p>\n<p class=\"intro-text\">Click the drop-down list and select a time period from the listed options.<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-drop.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8058\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-drop.png\" alt=\"duration-drop\" width=\"184\" height=\"285\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-drop.png 184w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-drop-97x150.png 97w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-drop-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-drop-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/duration-drop-31x48.png 31w\" sizes=\"auto, (max-width: 184px) 100vw, 184px\" \/><\/a><\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Month Picker<\/h2>\n<p class=\"intro-text\">The month picker allows you to select the month and year for which you want to display the data on the page. The page designer may have specified a default month, so the page will always display data for that month when it is first opened.<\/p>\n<p class=\"intro-text\">The month picker affects the data displayed on the page by providing the start and end time of the month to other controls on the page.<\/p>\n<table>\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8059\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker1.png\" alt=\"month-picker\" width=\"93\" height=\"25\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker1.png 93w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker1-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker1-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker1-48x13.png 48w\" sizes=\"auto, (max-width: 93px) 100vw, 93px\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8060\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-pickernov.png\" alt=\"month-pickernov\" width=\"94\" height=\"27\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-pickernov.png 94w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-pickernov-24x7.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-pickernov-36x10.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-pickernov-48x14.png 48w\" sizes=\"auto, (max-width: 94px) 100vw, 94px\" \/><\/td>\n<\/tr>\n<tr>\n<td><em>With a default month not set<\/em><\/td>\n<td><em>With the default month set to November 2015<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>How to use the Month Picker<\/strong><\/p>\n<ul class=\"intro-text\">\n<li>Click the drop-down list and select a time period from the listed options.<\/li>\n<li>To change the year, select 'Previous Year' or 'Next Year' as appropriate.<\/li>\n<li>You can also select 'Current Month' to select the month in progress.<\/li>\n<\/ul>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker-drop.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8061\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker-drop.png\" alt=\"month-picker-drop\" width=\"182\" height=\"376\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker-drop.png 182w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker-drop-73x150.png 73w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker-drop-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker-drop-17x36.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/month-picker-drop-23x48.png 23w\" sizes=\"auto, (max-width: 182px) 100vw, 182px\" \/><\/a><\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li><a title=\"Using Time Pickers (4.3.1)\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-time-pickers\/using-time-pickers4-3-1\/\">Using Time Pickers 4.3.1<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>IFS OI Explorer pages are interactive, allowing you to select different dates and times for which to view your data. This article describes how to use the different date and time pickers to change the focus of your data, and applies to IFS OI Explorer version 4.4 and later. <\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-time-pickers\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":13712,"parent":4254,"menu_order":54,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[348],"class_list":["post-15539","page","type-page","status-publish","has-post-thumbnail","hentry","category-explainer","tag-date-and-time-pickers","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/15539","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=15539"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/15539\/revisions"}],"predecessor-version":[{"id":66982,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/15539\/revisions\/66982"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/4254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/13712"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=15539"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=15539"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=15539"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}