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

18,658

Solution 1

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.

Solution 2

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.

Solution 3

I have/had a similar problem like this.

I use a input field type=text where i bind a jQuery datepicker to it. When I select the input field on my mobile (android chrome) I get the datepicker and the keyboard of the phone.

After searching StackOverflow I found some solutions about setting the input field on readonly or disabling the field. The problem with this is when you disable the field it will not be submitted, and when read-only is set my jQuery validator skips the field. So I needed a different solution.

I have now fixed it by letting the datepicker set the field on read only before opening the picker, and removing the readonly when the picker is closed. I have tested it so far on mobile android (chrome and I.E) and i dont get the native keyboard. iphone/ipad is not tested yet but maybe other can check it.

The code is:

$(this).datepicker({
beforeShow: function(input, obj){$(input).prop('readonly', 'readonly');},
onClose: function () {$(this).prop('readonly', false);}});

Solution 4

Just also add attribute readonly in datepicker.

$(".datepicker").datepicker({
    format: "dd-M-yyyy",
    autoclose: true,
    disableTouchKeyboard: true,
    Readonly: true
}).attr("readonly", "readonly");
Share:
18,658
GusP
Author by

GusP

I'm the Director of Engineering for the Visual Studio Platform team at Microsoft. The team is responsible for the VS IDE, debugger, setup, extensibility, and Unity Tools.

Updated on June 18, 2022

Comments

  • GusP
    GusP over 1 year

    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?

  • Nathan Wakefield
    Nathan Wakefield over 7 years
    Why do you use new { htmlAttributes = new { ... } }? I typically use only new { ... }. Is this necessarily bad?