Скрыть jquery datepicker и показать родной на мобильном телефоне

Question

Я использую datepicker из jquery-ui. Мой вход type=text. Я хочу показать datepicker только тогда, когда я нахожусь на рабочем столе, но когда я в мобильном браузере, я хочу показать родную датупиксера. Если я положил type=date, и я активирую финиверс, он будет показан вместе с родным датапикером, очевидно.

Как я могу показать jquery-datepicker на рабочем столе и на родном телефоне?

Answer 1

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

Используйте modernizer, чтобы проверить, есть ли у целевого браузера родной фидпик. Тогда, только если у него нет родного datepicker, используйте jQuery UI datepicker. Вы можете достичь его, как это:

<label>Date <input type="date"></label> 

<script> 
if(!Modernizr.inputtypes.date){ 
    $(’input[type=date]’).datepicker({ 
     // Consistent format 
     dateFormat: ’yy-mm-dd’ 
    }); 
} 
</script> 

Если браузер имеет встроенную DatePicker, то формат всегда YYYY-MM-DD (см Is there any way to change input type="date" format?), поэтому следует установить формат JQuery UI DatePicker также YYYY-MM-DD ,

Я также рекомендую взглянуть на это article.

Обратите внимание, что вы также можете проверить с помощью Modernizr, если целевое устройство является сенсорным устройством с !Modernizr.touch. Однако это не полезно, поскольку существуют сенсорные устройства без встроенного датпикера (реалистичный сценарий: настольный компьютер с сенсорным экраном с использованием firefox).