ipad web application: How do I prevent the keyboard from popping up on jquery datepicker

Question

I have a form with an date field with a jquery datepicker attached to it.

When I select the date field the datepicker pops up but then the iPad keyboard slides into

Answer 1

I believe this solution could work for all different date time pickers, but I have only tested it with the date picker from XDSoft.

The idea is to disable mouse events (pointer-events: 'none') on the input element so that the keyboard won't appear, and then add a onclick event on a parent div that wraps around the input element. The onclick event should then open the date time picker.

Code Example

This demonstrates how to fix the issue when using XDSoft's datetimepicker.

The solution assumes that the input element is wrapped inside a div element.

(function($){
    var originalDateTimePicker = $.fn.datetimepicker;
    $.fn.datetimepicker = function(args){
        this.each(function(i, dateTimePicker){
            dateTimePicker = $(dateTimePicker);
            dateTimePicker.closest('div').on('click', function(e){ 
                dateTimePicker.trigger('open');
            });
            dateTimePicker.css({ 'pointer-events': 'none' });
        });
        return originalDateTimePicker.apply(this, arguments);
    };
})(window.jQuery||window.$);