type: widget

release: 0.0

status: in development

documentation: url || N/A

demo: http://view.jqueryui.com/mask/tests/visual/timepicker/timepicker.html

TODOs

• Needs Demos
•  

1 - Description:

A basic time picker uses a 'masked input' which essentially breaks what looks like a single text input into multiple regions or zones that have custom formatting or constraints within each. A time picker can have up to 4 primary fields: hours, minutes, seconds and am/pm. A spinner control is used to increment and decrement values in the time picker according the user's current cursor focus (focusing into the minute section highights the values and can then be modified by the spinner)

A good example of this is a time picker which has 3 zones that are all controlled by a single spinner which is almost identical to a standard WIndows or Mac OS time picker except without the seconds field. See a working example (recommended by Filament Group) here:

http://www.filamentgroup.com/examples/timepicker/ (Note: This example actually uses 3 Spinners with masked buttons. Once the Spinner supports segment spinning the time picker will use a single Spinner as stated above)

Eventually, we might consider adding more experimental time pickers like this:

http://haineault.com/media/jquery/ui-timepickr/page/

Timepicker as a datepicker add-on: http://trentrichardson.com/examples/timepicker/

2 - Visual Design:

3 - Functional Specifications/Requirements:

• Left and Right arrow keys should select the "fields" while up and down arrow keys should "spin" through the valid options in that field. 
• Seconds Optional ( html5 'time' doesn't have seconds by default ) 
• Should support both 12hr with am/pm and 24hr  ( html5 uses 24h by default )
• The selectable numbers should be "circular" per field - I.E. pressing up on minute 59 should give you minute 0 in the same hour. 

Options:

• ampm (booelean, default: true) 
• If the time picker should force 24 hour format - Culture might force this anyway
• seconds (boolean, default: true)
• If the time picker should display/allow input of seconds 
• culture (string, default: null)
• Set to a globalize culture to define strings for am/pm, will force 24 hour formats in cultures that don't support 12 hour formats. 

Events:

• n/a

Methods:

• value([value])
• Gets or sets the value as a valid time string per the HTML5 spec 

4 - Markup & Style:

     4.1 Initial markup examples

     (Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )

     4.2 Recommended transformed HTML markup

     (The HTML markup structure and classes that will be used by the scripts in the enhanced version) 

     4.3 Accessibility recommendation

    (Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices) 

     4.4 CSS & Theme

    (Description of the CSS classes to be used for all states, how custom theming and Themeroller support will work.) 

5 - Latest version of plugin:

http://view.jqueryui.com/mask/tests/visual/timepicker/timepicker.html

6 - Open issues being discussed

(Use this area to place things that we're hashing out like featuresand options we're not sure we should include, questions about how this fits into UI and relates to other widgets and utilities, known problems, whether features should be broken across multiple releases, etc.)