Tempus-dominus: How to prevent mobile keyboard to show when opening the picker?

[bhalperin]

Mobile keyboard shows when tapping the field/icon to open the picker. This is true whether the text field is visible or not (I tried both)

[justinvoelker]

Set focusOnShow to false.

Be aware that right now setting this to false prevents a click outside of the calendar from closing the calendar (though people are aware of the issue and working toward a fix #1615).

[Kyle-Falconer]

For me, setting this prevents the mobile keyboard from opening _only_ if the date icon is selected. If the input field is selected, the mobile keyboard opens. (confirmed on Chrome on Android 7.0 and Android 5.1, and Safari on iOS 10.0.)

This does do the expected behavior if focusOnShow is false and ignoreReadonly is true and the input field is set to be readonly.

[J-Zet]

I would recommend to set showClose to true as well, to achieve a better user experience.

If you want to be even more fancy you could try something like this...

bindClickToHide = function () {
  $("#datetimepickerParent").on('click', function () {
    return $('.bootstrap-datetimepicker-widget').hide();
  });
};

unbindClickToHide = function () {
  return $("#datetimepickerParent").unbind('click');
};

registerEvents = function () {
  $('.datetimepicker').on('dp.show', function (event) {
    return bindClickToHide();
  });
  $('.datetimepicker').on('dp.hide', function (event) {
    return unbindClickToHide();
  });
};

[gero90]

This worked for me, showing the picker both with the icon and the input field, but no keyboard shown:

HTML:

<input type='text' class="form-control" placeholder="Fecha Inicio" readonly="true" />

JS:

$('#dateIniPick').datetimepicker({
    format: 'DD/MM/YYYY',
    ignoreReadonly: true,
    allowInputToggle: true
});

[mikeisrain]

Don't forget to adjust your styles, ;)

CSS:

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: #fff !important; opacity: 1; }

But the last method by gero90 worked perfectly for me too.

[mustanggb]

Slightly different version of J-Zet's code that allows clicking on $('#mydatefield') to toggle the picker.

$('#mydatefield').datetimepicker({
  focusOnShow: false,
  ignoreReadonly: true
}).on('dp.show', function (e) {
  $(e.target).on('mousedown', function (e) {
    $(e.target).data("DateTimePicker").hide();
    e.preventDefault();
  });
}).on('dp.hide', function (e) {
  $(e.target).off('mousedown');
});

[blairsaid]

@gero90 your solution worked BEAUTIFULLY and provided EXACTLY what I needed. This allows the Desktop functionality to still work while effectively disabling the user keyboard from popping up on Android and iOS. Beautiful code. Thank you.

[gero90]

@blairsaid I'm glad to help. Thanks for your words!

[William-H-M]

For anyone still getting with this issue, use what @gero90 did

<input type='text' class="form-control" placeholder="Fecha Inicio" readonly="true" />

JS:

````
$('#dateIniPick').datetimepicker({
format: 'DD/MM/YYYY',
ignoreReadonly: true,
allowInputToggle: true
});