Using Time Pickers

This article applies to versions 4.4 and later of P2 Explorer. For more, see Release History

Overview

P2 Explorer pages are interactive, allowing you to select different dates or periods for the data being displayed on your page.

This article describes how you can make some of these selections on an Explorer page.

Depending on the page design, you could have any of the following time pickers available:

  • Current Date/Time Toggle
  • Date Picker
  • Date/Time Picker
  • Date/Time Range Picker
  • Duration Picker
  • Month Picker

 


Current Date/Time Toggle

The Current Date/Time Toggle (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.

The current date/time toggle affects the data displayed on the page by providing the current date/time to other controls on the page.

now

 

How to use the Current Date/Time Toggle

The Current Date/Time Toggle has an on or off state.

On Off
now nowoff
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. 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.

 


Date Picker

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.

The date picker affects the data displayed on the page by providing the date to other controls on the page.

datepickershow

 

How to use the Date Picker

You can change the date in 2 ways:

  • Click in the date field and type the new date. The format depends on the locale of your browser e.g. dd/mm/yyyy
  • Click the calendar icon calendaricon 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.

datepicker611 datepickermonth

 


Date/Time Picker

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.

datetimepicker

 

How to use the Date/Time Picker

You can change the date and time in the following ways:

  • 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
  • Click the calendar icon calendaricon and then click through to choose the date. Refer to the Date Picker above.
  • Click the clock clock-icon icon and choose a time from the drop-down list.
  • Click the down arrow down-arrow and choose 'Now' to specify the current date and time.

dtpicker-now
Choosing the date Choosing the time Selecting the current date and time

 


Date/Time Range Picker

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.

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.

 

How to use the Date/Time Range Picker

  • 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.

  • You can also select "Choose start time" to enter a specific start date and time.
  • You can change the date for start and end dates in the following ways:
    • 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
    • Click the calendar icon calendaricon and then click through to choose the date. Refer to the Date Picker above.

  • To change the time, click the clock clock-icon icon and choose a time from the drop-down list.

  • You can also set the end time to be the current date and time. Click the down arrow down-arrow and choose 'Now'.

 


Duration Picker

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.

duration-picker

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.

 

How to use the Duration Picker

Click the drop-down list and select a time period from the listed options.

duration-drop

 


Month Picker

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.

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.

month-picker month-pickernov
With a default month not set With the default month set to November 2015

 

How to use the Month Picker

  • Click the drop-down list and select a time period from the listed options.
  • To change the year, select 'Previous Year' or 'Next Year' as appropriate.
  • You can also select 'Current Month' to select the month in progress.

month-picker-drop


Release History

Comments are closed