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

J

6

7

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?

Jevon answered 12/4, 2015 at 16:52 Comment(0)

J

5

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.

Jevon answered 12/4, 2015 at 16:52 Comment(1)

Why do you use new { htmlAttributes = new { ... } }? I typically use only new { ... }. Is this necessarily bad? – Bolshevist 24/5, 2016 at 20:29

D

20

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.

Danella answered 28/10, 2015 at 10:58 Comment(0)

J

5

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.

Jevon answered 12/4, 2015 at 16:52 Comment(1)

Why do you use new { htmlAttributes = new { ... } }? I typically use only new { ... }. Is this necessarily bad? – Bolshevist 24/5, 2016 at 20:29

R

2

Just also add attribute readonly in datepicker.

$(".datepicker").datepicker({
    format: "dd-M-yyyy",
    autoclose: true,
    disableTouchKeyboard: true,
    Readonly: true
}).attr("readonly", "readonly");

Rhythm answered 2/12, 2016 at 10:57 Comment(0)

E

1

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);}});

Eriha answered 13/6, 2015 at 9:16 Comment(0)

N

1

This quick block of Javascript will allow you to disable keyboard input within Date fields. This snippet is helpful if you need to avoid the virtual keyboard from appearing within the datepicker.

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

Neman answered 11/4, 2020 at 16:8 Comment(0)

K

0

This is an old question but I thought I should share my solution since this question shows up in Google search. If you make the input type a button the keyboard will not show up and you can style the button to look like a text input field if you really need to.

<input type="button" style="background-color:white;border:1px solid #DDD;padding:5px;cursor:text;" value="Enter a Date" id="datepicker">

Kerril answered 28/3, 2017 at 20:17 Comment(0)

Recommended topics

Hot tags