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

Instead of disabling the input give it a "readonly" property. This is better then disabling it because you can save the form without changing it.

Here is more info about readonly.

Answer 2

Using the latest version of the DatePicker, it's possible to do it like this:

//for tablets / phones
    $('#yourElement').datepicker().on('show', function (e) {
        $(this).trigger('blur');
    })

Please note however, the keyboard may flash at the bottom of the screen for a second until the blur() is enacted.

Answer 3

That's how I managed to deal with this problem by making the browser think the user blured the input so it hides the keyboard before it has time to show :

$('blabla')
    .datepicker(
    {
        /* options */
    })
    .on('focus',function()
    {
        $(this).trigger('blur');
    });

Works well for me where many of the other solutions I found didn't !

Answer 4

I used a slightly modified version of Rob Osborne's solution and it successfully prevented the keyboard from popping up on the iPad and iPhone.

$(".datePicker").datepicker({
    showOn: 'button',
    onClose: function(dateText, inst) 
    { 
        $(this).attr("disabled", false);
    },
    beforeShow: function(input, inst) 
    {
        $(this).attr("disabled", true);
    }
});

Answer 5

I have used this code and it works great... ".hasDatepicker" class is for my input that hold the date picker

<script type="text/javascript">

jQuery( document ).ready(function() {

var ybdDatePick = jQuery( ".hasDatepicker" );

    jQuery(function() {
       ybdDatePick.datepicker({ }).attr('readonly','readonly');

       ybdDatePick.on('focus',function() {
            jQuery(this).trigger('blur');
             this.datepicker({ }).attr('readonly','readonly');

          }
        );

});
});