Problem/Motivation

Some browsers don't support HTML5 time entry. A polyfill should be provided to improve UX.

Proposed resolution

Use http://jonthornton.github.io/jquery-timepicker/ as a polyfill.

Remaining tasks

None.

User interface changes

Users with browsers that don't support HTML5 time entry get a shiny time picker.

API changes

None.

Data model changes

None.

Comments

sun’s picture

I guess you had a concrete differentiation in mind when filing this issue, but can you clarify why this is not a duplicate of #1835016: Polyfill date input type?

KarenS’s picture

That issue is for adding the jquery datepicker for the date element. That is already in core, so we don't need to choose and add a datepicker, we just need to decide how to use it as a fallback when the HTML5 date element doesn't work.

This issue is about a timepicker for the time element. There is no timepicker in core, so we need both to decide what/whether to add a jquery timepicker to core, and if so, which one. And then we have the same issue about how to use it only as a fallback when the HTML5 timepicker doesn't work.

KarenS’s picture

Title: Add a jquery timepicker to date fields » Add a jquery timepicker to the date field time element

Maybe this title is better.

sun’s picture

Title: Add a jquery timepicker to the date field time element » Add jQuery Timepicker for the Time element of the datetime field
Component: javascript » datetime.module
Status: Postponed » Active
Issue tags: +JavaScript, +html5, +polyfill
mgifford’s picture

tagging

klonos’s picture

vijaycs85’s picture

looks like we are using http://keith-wood.name/timeEntry.html in D7 for time picker and it is very close to HTML 5 time picker (Except the arrows in right). Are we OK to add it to core for time?

mpdonadio’s picture

Version: 8.0.x-dev » 8.1.x-dev
Status: Active » Needs review
FileSize
110.01 KB

First pass using http://keith-wood.name/timeentry.html Seems to work in FireFox.

Not sure if/how to write tests for this. Also not sure sure how to handle the localization here.

mpdonadio’s picture

mgifford’s picture

Should I just be able to install this with SimplyTest.me?

mpdonadio’s picture

#10, that should work, but I haven't tried it. I think for the test, we could just render out a page w/ a datetime field on it or a timestamp entry (eg, the node form) and then check for the CSS and JS files.

droplet’s picture

Thanks for the patch.

If you testing in http://keith-wood.name/timeentry.html, don't you think it's UX problem ? I feel that hard to use.

mpdonadio’s picture

#12, that library was used b/c it is what is currently in the D7 Date Popup module. I agree that the UX isn't the best, however, it seemed like the least bad solution of the plugins I surveyed. Unfortunately, jQuery UI doesn't have an official option yet. I'm open to other options here.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.0-beta1 was released on March 2, 2016, which means new developments and disruptive changes should now be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

bjlewis2’s picture

The proposed timepicker is super unusable, at least in my testing.

If it were totally up to me, I'd really actually prefer to use the popup calendar for the date, but then a select list for the time. Maybe something like this https://www.drupal.org/project/stanford_date_timepicker

mpdonadio’s picture

I'd happily entertain another timepicker, especially if it is more usable. I didn't run across that one when I was searching. If anyone wants to reroll the patch feel free, otherewise I will update it one night this week.

arlinsandbulte’s picture

If we are choosing a timepicker, here is my favorite:
http://jonthornton.github.io/jquery-timepicker/
This looks like the simplest UI and most familiar to me:
This timepicker is similar to Google Calendar & Outlook timepickers. It uses standard/default form elements.

I'm not a fan of the small & non-standard buttons of http://keith-wood.name/timeEntry.html.
I agree the UI of this option is not very intuitive.

https://www.drupal.org/project/stanford_date_timepicker the pop-up window means more formatting and layout work is probably needed to match any given theme.

jhedstrom’s picture

If we are choosing a timepicker, here is my favorite:
http://jonthornton.github.io/jquery-timepicker/
This looks like the simplest UI and most familiar to me:
This timepicker is similar to Google Calendar & Outlook timepickers. It uses standard/default form elements.

This one looks great! I like that it is non-obtrusive if somebody wants to enter in a time not in the list.

bjlewis2’s picture

++ for that ^^

I change my vote to #17!!!

mpdonadio’s picture

Ok, here's a reroll w/ http://jonthornton.github.io/jquery-timepicker/ w/ the default options (well, need to set time format). Any we want to set? Since this is a polyfill, I don't want to add these to the field settings, and just set some sane ones in core/misc/date.js

No interdiff b/c it is too messy.

Tested in FF on OSX.

Status: Needs review » Needs work

The last submitted patch, 20: 1838234-20.patch, failed testing.

mpdonadio’s picture

Status: Needs work » Needs review
FileSize
18.83 KB

Ok, let's remake that after I adjust my .gitignore to just ignore the root /vendor directory...

jhedstrom’s picture

I manually tested this on Firefox and it works as expected. On Chrome (which has html5 support), it has no impact as expected.

This is tagged as 'needs accessibility review', but with this library is that still the case?

arlinsandbulte’s picture

Manually tested on ie11, and it looks good.
Manually tested on Chrome, and it has no impact (as expected). BUT, personally, I actually like this timepicker better than the chrome HTML5 picker. But, that is out of scope for this issue....

jhedstrom’s picture

This is still tagged as needing accessibility review. Aside from that I think this is RTBC.

BUT, personally, I actually like this timepicker better than the chrome HTML5 picker. But, that is out of scope for this issue....

Let's add a follow-up to make this a configurable widget that would override the native time picker.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.0-beta1 was released on August 3, 2016, which means new developments and disruptive changes should now be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Dom.’s picture

  1. --- /dev/null
    +++ b/core/assets/vendor/jquery-timepicker/jquery.timepicker.css
    

    Tabs are use all over the css file instead of whtespaces, resulting in 'whitespaces errors' when applying patch.

  2. +++ b/core/assets/vendor/jquery-timepicker/jquery.timepicker.min.js
    @@ -0,0 +1,7 @@
    \ No newline at end of file
    

    Doesn't this takes newline at EOF ?

Also manually tested give no result on Chrome (as expected) and this on IE:
Timepicker look and feel on IE.

It fills odd to me. I don't like that datepicker to have useless seconds in suggestions, plus the design does not seems... similar ... to the datepicker of the date part.

Last but not least, a JavascriptTestBase could be nice as a follow-up, actually could be in the new test for #ajax / js tests on elements introduced in #2781103: Date FAPI element type do not allow AJAX via #ajax API

mpdonadio’s picture

Thought I responded to this. #28-1,2, since those are vendor files we use them as-is and don't apply Drupal coding standards to them.

Open to suggestions for different configurations options.

JSTB. What would we want to test? We don't need to test the polyfill itself, just that it works? Since PhantomJS is WebKit, I am not sure if this would even work? WOrth looking into, though, as a followup (would probably want to combine with coverage of the date polyfill).

Dom.’s picture

@mpdonadio:

1- Good point: the file is in vendor, my bad.

2- Would something like (http://jonthornton.github.io/jquery-timepicker/) with 13:00 or 01:00PM be better then 01:00:00 ? Meaning removing the seconds ?

3- Also for the test I wanted to suggest checking that the popup pops-up. But maybe I'm wrong on it indeed !

4- Could we style the popup with something more drupal-like ?