Tempus-dominus: Paging months/year causes the date select dropdown to close immediately when using FastClick

Created on 2 Jan 2015 · 8Comments · Source: Eonasdan/tempus-dominus

Selecting the next month or year using the datepicker on a web application using the FastClick js library (https://github.com/ftlabs/fastclick) for mobile devices causes the calendar selector to hide itself immediately.

This seems to be an issue with touchstart versus click listeners, as discussed here https://github.com/ftlabs/fastclick/issues/48 and here https://github.com/twbs/bootstrap/pull/6488.

Source

SimonKaluza

Most helpful comment

Im trying to use datetimepicker together with fastclick without success. I've tried your hack coxw but somehow when the layout changes (for example when switching between months) without calling update/show/change function, which in turns closes the popup the next click. Why is this issue closed when the issue seems to be unresolved?

Gronis on 3 May 2016

👍2

All 8 comments

do you still have this issue with v4?

Eonasdan on 30 Jan 2015

This still fails on V4, it's currently unusable when using FastClick.

Adding the 'needsclick' class to all tappable elements should fix it.

timothyarmes on 6 Feb 2015

I can't reproduce this in the current version.

Please provide a fiddle or a demo page exhibiting the issue

Eonasdan on 27 Mar 2015

@Eonasdan
https://jsfiddle.net/bradpitcher/gLsqtzjs/2/

Open on mobile or enable "device mode" in chrome developer tools to witness the issue

brad on 28 May 2015

I'm also having this problem when combining fastclick and https://github.com/smalot/bootstrap-datetimepicker.

Adding the 'needsclick' class to the form input element helped with that library. I tried adding that class to @brad's jsfiddle and it did not help.

phpMagpie on 2 Jun 2015

Same - adding needsclick class to all of the th/td elements is what is required for this to work with fastclick. This is specifically testing it on iPad. It would be helpful to be able to add classes to clickable elements to get around this, or you can make a nasty hack like this:

if ('ontouchstart' in document.documentElement) {
  $('#datesAvailable').on("dp.update,dp.show", function(e) {
    $('#datesAvailable').find('th,td').addClass('needsclick');
  });
}