{"id":7937,"date":"2015-11-09T14:38:28","date_gmt":"2015-11-09T06:38:28","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=7937"},"modified":"2017-12-14T14:26:45","modified_gmt":"2017-12-14T06:26:45","slug":"using-time-pickers4-3-1","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-time-pickers\/using-time-pickers4-3-1\/","title":{"rendered":"Using Time Pickers (4.3.1)"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.3.1 of P2 Explorer. For help on Using Time Pickers in the latest version of Explorer, see <a title=\"Using Time Pickers\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/using-the-page-controls\/using-time-pickers\/\">Using Time Pickers<\/a>.<\/p>\n<h2 class=\"page-subheading\"><span id=\"Overview\">Overview<\/span><\/h2>\n<p class=\"intro-text\">P2 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\u00a0(called the 'Now' button in previous versions of P2 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\u00a0affects the data displayed on the page by providing the current date\/time to other controls on the page.\u00a0<\/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\u00a0on 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\u00a0on 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.\u00a0The page designer may have specified a default date, so the page will always display data for that date\u00a0when it is first opened.<\/p>\n<p class=\"intro-text\">The date\u00a0picker affects the data displayed on the page by providing the date to other controls on the page.\u00a0<\/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\u00a0<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>\u00a0and 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\">\u00a0<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\" \/>\u00a0<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\u00a0picker affects the data displayed on the page by providing the date and\u00a0time to other controls on the page.\u00a0The page designer may have specified a default date\/time, so the page will always display data for that date and time\u00a0when 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>\u00a0<\/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\u00a0<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>\u00a0and 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>\u00a0icon and choose a time from the drop-down list.<\/li>\n<li>Click the down arrow\u00a0<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>\u00a0and choose 'Now' to specify the current date and time.<\/li>\n<\/ul>\n<table>\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8046\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-date.png\" alt=\"dtpicker-date\" width=\"254\" height=\"270\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-date.png 254w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-date-141x150.png 141w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-date-34x36.png 34w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-date-45x48.png 45w\" sizes=\"auto, (max-width: 254px) 100vw, 254px\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8045\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-time.png\" alt=\"dtpicker-time\" width=\"255\" height=\"243\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-time.png 255w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-time-150x143.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-time-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-time-36x34.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/dtpicker-time-48x46.png 48w\" sizes=\"auto, (max-width: 255px) 100vw, 255px\" \/><\/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\u00a0the date<\/em><\/td>\n<td><em>Choosing\u00a0the 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.\u00a0The page designer may have specified a default time range, so the page will always display data for that range\u00a0when it is first opened.<\/p>\n<p class=\"intro-text\">The date\/time range\u00a0picker affects the data displayed on the page by providing the start date\/time and end date\/time to other controls on the page.\u00a0<\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/rangepicker.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8047\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/rangepicker.png\" alt=\"rangepicker\" width=\"576\" height=\"34\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/rangepicker.png 576w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/rangepicker-150x9.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/rangepicker-24x1.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/rangepicker-36x2.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/rangepicker-48x3.png 48w\" sizes=\"auto, (max-width: 576px) 100vw, 576px\" \/><\/a>\u00a0<\/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;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8048\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start.png\" alt=\"range-start\" width=\"575\" height=\"344\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start.png 575w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-150x90.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-48x29.png 48w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><\/a><\/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\u00a0in 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\u00a0<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>\u00a0and 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;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-date.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8049\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-date.png\" alt=\"range-start-date\" width=\"573\" height=\"295\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-date.png 573w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-date-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-date-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-date-36x19.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-date-48x25.png 48w\" sizes=\"auto, (max-width: 573px) 100vw, 573px\" \/><\/a><\/p>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-date.png\" rel=\"lightbox-13\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8053\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-date.png\" alt=\"range-end-date\" width=\"583\" height=\"298\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-date.png 583w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-date-150x77.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-date-24x12.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-date-36x18.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-date-48x25.png 48w\" sizes=\"auto, (max-width: 583px) 100vw, 583px\" \/><\/a><\/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>\u00a0icon and choose a time from the drop-down list.<\/li>\n<\/ul>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-time.png\" rel=\"lightbox-15\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8050\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-time.png\" alt=\"range-start-time\" width=\"577\" height=\"264\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-time.png 577w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-time-150x69.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-time-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-time-36x16.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-start-time-48x22.png 48w\" sizes=\"auto, (max-width: 577px) 100vw, 577px\" \/><\/a><\/p>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-time.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8054\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-time.png\" alt=\"range-end-time\" width=\"572\" height=\"266\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-time.png 572w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-time-150x70.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-time-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-time-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-time-48x22.png 48w\" sizes=\"auto, (max-width: 572px) 100vw, 572px\" \/><\/a><\/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\u00a0<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>\u00a0and choose 'Now'.<\/li>\n<\/ul>\n<p class=\"intro-text\" style=\"padding-left: 30px;\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-drop.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-8055\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-drop.png\" alt=\"range-end-drop\" width=\"588\" height=\"108\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-drop.png 588w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-drop-150x28.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-drop-24x4.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-drop-36x7.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/11\/range-end-drop-48x9.png 48w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><\/a><\/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.\u00a0It appears as a simple drop-down list from which you select a time period.\u00a0The page designer may have specified a default duration, so the page will always display data for that time period\u00a0when 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-19\"><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\u00a0picker affects the data displayed on the page by providing the start time, end time, and duration to other controls on the page.\u00a0<\/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-20\"><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.\u00a0<\/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-21\"><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<p class=\"intro-text\">\u00a0\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>P2 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.<\/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\/using-time-pickers4-3-1\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":1,"featured_media":4505,"parent":15539,"menu_order":1,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[4],"tags":[348],"class_list":["post-7937","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\/7937","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\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=7937"}],"version-history":[{"count":0,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/7937\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/15539"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/4505"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=7937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=7937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=7937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}