BrandwatchLtd/daterangepicker — pull request #11 by jdelight (2014-09-12 11:02:08+00:00)
Title: Time support

WIP :construction:

This PR adds a ```timePicker: true``` option to the date picker config which renders a time picker below each calendar.

Loosely based on the Google Calendar time picker and includes the following features:
* provides a default list of preset times at 30min intervals
* time picker opens on tab / focus
* highlights the time selected (if it's a preset time)
* scrolls the list to centre the selected time
* if the selected time is not a preset, it uses the closest preset
* validates input by reverting to last correctly entered time
* includes a no time selected option (currently ```--:--```) this can be used to represent midnight at start or end of day

_basic time picker_
![time-picker](https://cloud.githubusercontent.com/assets/1387956/4248676/b62350a6-3a69-11e4-812c-aacdcfa2fc97.png)

_highlights selected time if it's a preset_
![selected-time-highlighted](https://cloud.githubusercontent.com/assets/1387956/4248674/b61fce72-3a69-11e4-8185-60027a6239b0.png)

_scrolls to relevant point if time is not a preset_
![scroll-to-relevant-point](https://cloud.githubusercontent.com/assets/1387956/4248675/b61ffa82-3a69-11e4-9c86-831bdc85f271.png)

**Try it out**
You can try this out on the date picker on this deploy against stage: https://seg-2710-time-support-for-date-picker.frontend.brandwatch.com/
This also includes rolling time (e.g. last 30 mins).

The time picker is enabled everywhere a the moment (for testing) but the plan is for it to be behind a module and then only enabled for certain components.

**Current Issues**
There is some ongoing UX work to decide the final UI for the time picker, (e.g. showing checkboxes to the user so they can opt into selecting time).
See some options here: http://2plzrl.axshare.com/new_page_1.html

**Future Improvements**
* enable more keyboard support (e.g. up/down arrow to select)