prevent keyboard from popping up on datepicker mobile

Question

I have this page with a booking widget and date picker here:

http://anivillas.com/

(Book your stay)

The following code is set to try and prevent the keyboard from coming up on mobile devices when choosing the datepicker.

<script type="text/javascript">
jQuery(function() {
 jQuery( ".hasDatepicker" ).hasDatepicker({ 
 }).attr('readonly','readonly');
});
</script>

This is working on desktop but not mobile devices. Does someone know how to prevent the keyboard from popping up on mobile?

Answer 1

Try this (taken from ipad web application: How do I prevent the keyboard from popping up on jquery datepicker):

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

Answer 2

For others looking for this answer, this is answered here: prevent iphone default keyboard when focusing an <input>

Either of these worked for me - edit the HTML tag as follows, rather than adding JS or jQuery:

<input ... readonly="readonly">
<input ... inputmode='none'>

Answer 3

Simply add the 'readonly' attribute to the form filed:

<input id="datepicker" type="text" name="name" required="" readonly>