Tempus-dominus: Mobile screen usage

[vkomphasouk]

I have the picker hooked up with the calendar icon and an input. It works wonders on the desktop. However, on a mobile device (iPhone 6), when I click on the calendar icon, both the picker and the built in Safari keyboard shows up, which is not ideal since half of the picker is cut off due to the keyboard. Any way to not have the keyboard show up and just show the picker? I couldn't really find any examples for mobile device use with the picker.

Not sure if this is an issue or just how the picker is supposed to be used. Any recommendations for use on a mobile device would be helpful.

Thanks

[vkomphasouk]

Ok, after searching around I found out by setting focusOnShow: false the keyboard does not popup on a mobile devices. However, now i'm able to open more than 1 picker at a time. Any ideas to solve this?

[digitalfrost]

+1 for a section on Mobile screen usage in the docs
@vkomphasouk did you manage to fix / work around this problem?
Are you experiencing the same issue on Android?

[SgtOddball]

I can attest to having the same issue on Android. Might be a case of adding another check if there's a calendar already open and closing it down if it already exists.

As an extra question @vkomphasouk does it scroll down the page on iPhone when the input is selected, so that the input box is at the top of the page, causing the calendar to appear above the input and so off screen?

[FBosler]

can you guys actually pick dates on mobile? doesn't really work for me :( The picker would open, and then after clicking on a date or time it would close, but won't take the picked date into consideration.

Tried the fiddle, which works on mobile. So I guess it must be a problem with some of the other stuff.

[KryptikOne]

@vkomphasouk I used the combination of adding the readonly="readonly" attribute on the input and using the following on my config...

$('#start_control').datetimepicker({
    minDate: startDate,
    maxDate: endDate,
    stepping: 60,
    toolbarPlacement: 'top',
    focusOnShow: false,
    ignoreReadonly: true
});

focusOnShow and ignoreReadonly being the important options there.
With the options configured as such, it works great on iOS for me, haven't tested Android.

[Anachin]

doesn't work on Android Devices,

[glendlockhart]

Seems to work on htc one m7 - using lollipop (android 5.0) and on kitkat (4.4) and on iphone 6.

[migu0]

+1 for @KryptikOne's solution, tested on Chrome for iOS and Safari on an iPhone 5s with iOS 9.2.1

[kriswebdev]

KryptikOne solution has the adverse effect that clicking on the rest of the page doesn't close the datetime picker anymore. This is due to the fact that the picker is used to close when the field looses focus and with this workaround, we remove the focus...

Smalot fork solution to this problem is (within the module code):

  // Picker object
  var Datetimepicker = function (element, options) {
    this.clickedOutside = function (e) {
        // Clicked outside the datetimepicker, hide it
        if ($(e.target).closest('.datetimepicker').length === 0) {
            that.hide();
        }
    }
    $(document).on('mousedown', this.clickedOutside);
    ...
    }

  Datetimepicker.prototype = {
      remove: function () {
        ...
        $(document).off('mousedown', this.clickedOutside);
        ...
      },
    ...
    }

Smalot fork has some good ideas that should be integrated in Eonasdan fork I think:

• Mobile-friendly
• Automatic date picker opening when the field is selected (not only the icon)
• Automatic time picker opening when a date is selected

However, Eonasdan design is better and it's compatible with (obsolete) Mootools.

[eonasdan-bot]

Hello. Thanks for using my project. We’re closing all tickets/prs for v4 as it is no longer supported. We’re making way for a new version. Please read this blog post