Position problem on mobile devices

[dev4press]

When trying demo page in Chrome on mobile devices (Android 5.1 and 6.0), date/time box is in wrong position. Check out the screenshots for examples. In both cases, I clicked on the first Date input (it is highlighted in blue), and date selection box is displayed way down below the field, instead right under the field.

[nehakadam]

There is no issue in DateTimePicker. This was due to a condition written in Demo. In order to avoid it, I have added a separate Demo page. You can find a link to Demo page on DateTimePicker Demo and Doc Page below "View on Github" button.

[dev4press]

Thanks, it works. But, I have noticed another issue:

When the picker is open (this is all with testing on mobile/table device), if I tap on the number in the popup (year, month...), device opens the keyboard, but the picker closes at the same time, so there is no way to enter the number using keyboard, only by using + and - buttons.

[nehakadam]

Hello, thanks for reporting issue. This was an issue caused by implementation code written to display DateTimePicker as a popup based on Screen Width. There is no issue in the plugin code.

[yanike]

@nehakadam This issue still exists. You can see it on iOS.

http://i903.photobucket.com/albums/ac231/yanike5/fce6f6e5-13c4-45d8-bd39-fbd06047e42a_zpscuc6hgiu.png

It's because iOS doesn't support position: fixed; well.

Here's a JavaScript solution I wrote for iOS: http://i903.photobucket.com/albums/ac231/yanike5/a5b53249-9dd5-4766-9c93-1efaa279f3f6_zpslu5vokig.jpg

<script type="text/javascript">
    function dtpickerContMoveiOS() {
        /* Detect iOS device */
        var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

        /* Execute if iOS device is found  */
        if (iOS) {
            /* Get SCROLL location */
            var tscroll = window.scrollY /*Modern Way (Chrome, Firefox)*/ || window.pageYOffset /*Modern IE, including IE11*/ || document.documentElement.scrollTop /*Old IE, 6,7,8*/ ;
            /* Calculate position */
            var topscroll = (((document.documentElement.clientHeight / 2) + tscroll) + "px");
            /* Make POSITION ABSOLUTE so iOS devices can interact with DateTimePicker */
            jQuery('.dtpicker-mobile').css('position', 'absolute');
            jQuery('.dtpicker-cont').css('position', 'absolute');
            /* Scroll DateTimePicker into position */
            jQuery('.dtpicker-cont').css('top', topscroll);
        }
    }

    /* WINDOW EVENTLISTENER to SCROLL */
    if (window.addEventListener) {
        window.addEventListener('scroll', dtpickerContMoveiOS, false);
    } else if (window.attachEvent) {
        window.attachEvent('on' + 'scroll', dtpickerContMoveiOS);
    } else {
        window['on' + 'scroll'] = dtpickerContMoveiOS;
    }

    /* Makes readonly INPUTS on iOS correctly work */
    $(function() {
        $('input[readonly]').on('focus', function(ev) {
            $(this).trigger('blur');
        });
    });
</script>

[ezersky]

@yanike

Javascript

function dtpickerContMoveiOS() {
  /* Detect iOS device*/
  var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

  /* Execute if iOS device is found*/
  if (iOS) {
    jQuery('.dtpicker-mobile').addClass('absolute-center');
    jQuery('.dtpicker-cont').addClass('absolute-center');
  }
}

/* Makes readonly INPUTS on iOS correctly work */
$(function() {
  $('input[readonly]').on('focus', function(ev) {
    $(this).trigger('blur');
  });
});

CSS

.absolute-center {  
  position: absolute;
  margin: auto;
  top: 0; 
  left: 0; 
  bottom: 0; 
  right: 0;
}