предотвращение клавиатуры iphone по умолчанию при фокусировке

вы можете добавить функцию обратного вызова в свой DatePicker, чтобы сказать ему, чтобы размыть поле ввода перед отображением DatePicker.

$('.selector').datepicker({
   beforeShow: function(){$('input').blur();}
});

Примечание: клавиатура iOS появится на долю секунды, а затем скроется.

Я задал аналогичный вопрос здесь и получил фантастический ответ - используйте iPhone native datepicker - это здорово.

Как отключить клавиатуру iPhone для указанного поля ввода на веб-странице

синопсис / псевдо-код:

if small screen mobile device 

  set field type to "date" - e.g. document.getElementById('my_field').type = "date";
  // input fields of type "date" invoke the iPhone datepicker.

else

  init datepicker - e.g. $("#my_field").datepicker();

причина динамической установки типа поля на "дата" заключается в том, что Opera будет всплывать свой собственный собственный datepicker в противном случае, и я предполагаю, что вы хотите последовательно отображать datepicker на рабочем столе броузеры.

Так как я не могу комментировать верхний комментарий, я вынужден представить "ответ."

проблема с выбранным ответом заключается в том, что установка поля только для чтения выводит поле из порядка вкладок на iPhone. Поэтому, если вам нравится вводить формы, нажав "Далее", вы пропустите прямо над полем.

ниже код работает для меня:

<input id="myDatePicker" class="readonlyjm"/>


$('#myDatePicker').datepicker({
/* options */
});

$('.readonlyjm').on('focus',function(){
$(this).trigger('blur');
});

Итак, вот мое решение (аналогично ответу Джона Вэнса):

сначала перейдите сюда и получите функцию для обнаружения мобильных браузеров.

http://detectmobilebrowsers.com/

у них есть много различных способов, чтобы обнаружить, если вы находитесь на мобильный телефон, поэтому найти тот, который работает с тем, что вы используете.

Ваша HTML страница (псевдо код):

If Mobile Then
    <input id="selling-date" type="date" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />
else
    <input id="selling-date" type="text" class="date-picker" readonly="readonly" placeholder="YYYY-MM-DD" max="2999-12-31" min="2010-01-01" value="2015-01-01" />

JQuery:

$( ".date-picker" ).each(function() {
    var min = $( this ).attr("min");
    var max = $( this ).attr("max");
    $( this ).datepicker({ 
        dateFormat: "yy-mm-dd",  
        minDate: min,  
        maxDate: max  
    });
});

таким образом, вы все еще можете использовать родной дата селекторы в мобильном телефоне, все еще устанавливая минимальные и максимальные даты в любом случае.

поле для не мобильных устройств должно быть прочитано только потому, что если мобильный браузер, такой как chrome для ios, "запрашивает настольную версию", то они могут обойти мобильную проверку, и вы все равно хотите, чтобы клавиатура не отображалась.

однако если поле только для чтения это может выглядеть для пользователя, как они не могут изменить поле. Вы можете исправить это, изменив CSS, чтобы он выглядел так, как будто он не читается только (т. е. измените цвет границы на черный), но если вы не меняете CSS для всех входных тегов, вам будет трудно сохранить внешний вид в разных браузерах.

чтобы получить arround, что я просто добавить кнопку изображения календаря в выбор даты. Просто измените свой код JQuery немного:

$( ".date-picker" ).each(function() {
    var min = $( this ).attr("min");
    var max = $( this ).attr("max");
    $( this ).datepicker({ 
        dateFormat: "yy-mm-dd",  
        minDate: min,  
        maxDate: max,
        showOn: "both",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date"
    });
});

Примечание: Вы должны будете найти подходящее изображение.

лучший способ решить эту проблему, по моему мнению, использует "ignoreReadonly".

сначала сделайте поле ввода только для чтения, а затем добавьте ignoreReadonly:true. Это позволит убедиться, что даже если текстовое поле только для чтения , всплывающее окно покажет.

$('#txtStartDate').datetimepicker({
            locale: "da",
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
        $('#txtEndDate').datetimepicker({
            locale: "da",
            useCurrent: false,
            format: "DD/MM/YYYY",
            ignoreReadonly: true
        });
});

@rene-pot правильно. Однако у вас будет запрещенный знак на настольной версии веб-сайта. Чтобы обойти это, примените readonly= "true" к div, который будет отображаться только на мобильном представлении, а не на рабочем столе. Смотрите, что мы здесь сделали http://www.naivashahotels.com/naivasha-hotels/lake-naivasha-country-club/