Skip to content

Time Picker

Borislav Kulov edited this page May 7, 2019 · 71 revisions

Revision History

Version User Date Notes
0.1 Stefan Ivanov 2018 initial draft
0.2 Stefan Ivanov 22.11.2018 adding dropdown stories
0.3 Stefan Ivanov 07.05.2019 adding dropdown buttons
  • Borislav Kulov | Date: 07.05.2019
  • Konstantin Dinev | Date:
  • Slav Karaslavov | Date:

The Time Picker is the editor for selecting the time portion of a date.

Overview

igx-time-picker accepts as input a properly formatted combination of Hours and Minutes.

Objectives

User Stories

As an end user, I want to

  • select the time from the (default)dialog or dropdown with scrollable time portions
  • be able to increment each portion of the time separately i.e. Hours and Minutes

  • be able to increment the time portion where the caret currently is ( focusing the input will cause the dropdown to close if open)
  • be able to type in the time input a new value
  • be able to increment in the dialog/dropdown when scrolling the mouse wheel down and decrement in the dialog/dropdown when scrolling the mouse wheel up
  • be able to increment in the input when scrolling the mouse wheel up and decrement in the input when scrolling the mouse wheel down
  • be able to increment in the dialog/dropdown with the keyboard arrow down key and decrement in the dialog/dropdown with the arrow up key
  • be able to increment in the input with the keyboard arrow up and decrement in the input with the keyboard arrow down

  • have my mouse wheel interactions to affect the time portion that is currently below the cursor in the dropdown/dialog and the time portion position where the caret is inside the input
  • be able to use the keyboard navigation available in other inputs and pickers
  • clear the time I have entered all at once (the clear icon is not shown for empty value)
  • have a clear visual indication when the Time Picker is allowing/disallowing user interaction
  • be able to type in values for time portions with the keyboard
  • have a visual cue about the portion of the time that is currently in focus through a subtle background coloring
  • have a visual cue about the portion of the time that is currently hovered by coloring the text accordingly
  • be able to close the drop-down and discard any changes via a CANCEL button or click outside the drop-down (identical behavior to hitting the ESC key)

User Interface

input showing a dialog

input with dropdown

Developer Stories

As a developer, I want to

  • be able to switch the Time Picker between one of the following states: enabled, disabled, read-only
  • be able to select the time picking interaction between the following modes: dialog picker and dropdown input
  • be able to set the default time which is rendered as a hint
  • use the time format according to the user locale
  • have support for 12H/24H with AM/PM accordingly
  • AM/PM(default) is always set even if time value is empty
  • be able to override the user locale with a custom format
  • be able to enable/disable(default) the spinning when incrementing/decrementing a time portion through a boolean option e.g. limitSpin
  • be able to enable/disable the single digit hours to be prefixed with a 0 e.g. 9:03 or 09:03
  • be able to set a custom step for incrementing each portion of the time, different than the default 1 for Hours and 1 for Minutes
  • set whether increments continue from 59 to 00 for minutes and from 23 to 0 / 12 to 1 && AM to PM (default) for hours or just "stay there as if they have reached a maximum allowable value"
  • set whether increments carry over (default) from minutes to hours or not e.g. incrementing the minute portion from 59 to 00 also moves the hour to the next value
  • have the time automatically set to the default value when the user clears the time
  • set a time range, which would limit the user selection of the time portions so that they fit in just that range
  • have my own custom handling if time outside this range is selected through events that are raised accordingly
  • be able to embed a time picker within another component e.g. in a grid with a date column that is formatted to only show time or a list used as a collection of settings
  • have the dropdown with a min width that does not allow the time picker to be squeezed too much and be distorted
  • be able to customize the buttons in the time picker dropdown e.g. remove the CANCEL button or add a third one
  • have a mechanism to cancel the closing of the date picker dropdown

API

ARIA support

Scenarios not covered by igx-time-picker

  • Support for dates
  • Support for Meridian labels (GMT, EET etc.) based on locale via a separate control

Test Scenarios - DropDown Mode

Automation

Basic

Input
  • Type specific time in the input.
  • Increase and decrease hours/minutes/AMPM, where the caret is present, using:
    • arrows
    • mouse wheel
  • Click on the clock icon should open the dropdown.
  • Setting isSpinLoop to false should prevent scrolling with mouse/arrows the input before/over the min/max values if they are set. If they are not set it should break at "00:00" for the hours and "00" - "60" for the minutes.
  • Clear button should reset the value.
  • When losing focus the input's placeholder should change to the format "hh:mm tt".
  • Space Bar or Alt + arrow down should open the dropdown.
  • Disabled state should change css and not allow any interaction.
  • Setting invalid time should trigger a onValidationFailed event.
DropDown
  • Select Hour, Minutes, AMPM using mouse click.
  • Change the focus column with hover. Increase and decrease hours/minutes/AMPM, using:
    • arrows
    • mouse wheel
    • Note: The values in the input should change accordingly.
  • Selecting time from the dropdown and clicking outside of the time picker should close the drop down and accept the selected time.
  • Setting isSpinLoop to false should stop looping the drop down over "00:00" for the hours and "00" - "60" for the minutes.
  • Setting isSpinLoop to false should not accept values from the drop down before/over the min/max values when they are set.
  • While dropdown is open click on input to check if dropdown closes.
  • Should be able to change the dropdown mode at runtime.
  • Selecting invalid time and clicking outside of the dropdown should trigger a onValidationFailed event.
API
  • Set a specific time using Date object.
  • Apply different valid formats:
    • "HH:mm" should set a 24h format - AMPM column should not be visible
    • "H:m" 24h format without "0" in 0-9 hours/minutes.
    • "hh:mm tt" should set a AM/PM format - AMPM column should be visible
    • "h:m tt" format without "0" in 0-9 hours/minutes.
  • Should be able to set for itemsDelta any number between 1 - 24 for the hours and any number between 1 - 60 for the minutes.
  • Changing the time after midnight should not change the date.
  • Setting invalid time should trigger a onValidationFailed event.

Manual

  • Should allow using TimePicker on touch only environment.
  • Should allow opening, closing, editing via keyboard navigation.

Sample Scenarios

Google calendar web and mobile apps

http://www.onlinecode.org/angular-material-datetimepicker-demo/

https://danielykpan.github.io/date-time-picker/

https://angular-ui.github.io/bootstrap/#!#timepicker

https://getuikit.com/v2/docs/timepicker.html

Clone this wiki locally
You can’t perform that action at this time.