How to not show a mobile keyboard when using bootstrap-datepicker?

Question

I tried setting the disableTouchKeyboard option but it did nothing -- at least on iOS/Safari. The options I was specifically using were:

$(".datepicker").datepicker({
    autoclose: true,
    disableTouchKeyboard: true,
    format: 'm/d/yyyy',
    startDate: '01/01/1900',
    todayBtn: 'linked',
    todayHighlight: true,
});

Anyone know what the best way to do this is?

Answer 1

If you are using Bootstrap3 Datepicker:
https://eonasdan.github.io/bootstrap-datetimepicker

Just add this property to the input: readonly="readonly" and this property
to options when instantiate the library.

$('#datetimepicker1').datetimepicker({
        useCurrent: false,
        daysOfWeekDisabled: [0, 6],
        format: 'DD-MM-YYYY',
        ignoreReadonly: true   <------ this property
});

Tested on Safari iPhone and Chrome / Native browser Android.

Answer 2

This is how I've accomplished this but I'd love to know if there are better ways.

Using the same options in the question, I then also made the HTML text box readonly by doing this in my HTML:

@Html.EditorFor(model => model.Date, new { htmlAttributes = new { 
    @class = "form-control datepicker", @readonly = "true",
}})

This seems to work as JavaScript can still change the value of the field. However, it does make the background of the text box gray (i.e., disabled) and it changes the mouse pointer to the crossed circle icon (not-allowed) which is not desired. To get around that I did this added an inline style:

@Html.EditorFor(model => model.Date, new { htmlAttributes = new { 
    @class = "form-control datepicker", @readonly = "true",
    style = "cursor: default; background-color: #fff"
}})

I tried to override the cursor and background-color in CSS (using !important) but that didn't seem to work in Internet Explorer.

This isn't pretty but it works for me. Still need to see how I could do this in a more robust way (e.g., no hard coding the background color, not having to specify this on all of my date fields, etc.). If anyone knows a better way, I'd very much appreciate it.