Как отключить datepicker в Microsoft Edge?

Question

У меня есть несколько входов с типом = «дата» и вы хотите отключить выбор даты по умолчанию в Microsoft Edge, так как я использую jQuery datepicker. Как отключить это с помощью CSS или JavaScript? Он отлично работает в Chrome и Firefox, но не Edge. Любые ответы будут оценены.

Работающий jsFiddle

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> 

<input type="date"> 

JS

$(document).ready(function() { 
    if (!Modernizr.inputtypes.date || $(window).width() >= 900) { 
     $('input[type=date]').datepicker(); 
    } 
}); 

$(window).resize(function() { 
    if (!Modernizr.inputtypes.date || $(window).width() >= 900) { 
     $('input[type=date]').datepicker();    
    } 
    else { 
     $('input[type=date]').datepicker("destroy"); 
    } 
}); 

CSS

input[type=date]::-webkit-inner-spin-button, input[type=date]::-webkit-calendar-picker-indicator { 
    display: none; 
    -webkit-appearance: none; 
} 

Answer 1

Это не возможно отключить родной контроль Datepicker функциональность в Edge (although Chrome can via a hack) - все равно.

Элементы управления доступом, если они не разработаны браузером, обычно основаны на/являются системными элементами управления. Это означает, что входной datepicker является входным datepicker, а выпадающий список select - это выпадающий список select.

Большинство элементов управления ограничено в настройках, помимо основных стилей, таких как границы, отступы и стили шрифта, а также атрибуты HTML-стандартов, например. placeholder.

У вас есть несколько вариантов:

Оставить контроль Datepicker по умолчанию как есть

Это вариант Я буду рекомендовать. Использование стандартных системных элементов управления (+ стиль, где это применимо), как правило, является лучшей политикой. Это обеспечивает максимальную совместимость устройств и знакомство с вашими пользователями. Кроме того, все нормально «просто работает».

В вашем JS-коде также меньше накладных расходов.

Зла Опция: Браузер обнаружения

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

Answer 2

Тип ввода должен быть текстовым, а не дата. Это ...

<input type="date" /> 

Должно быть

<input type="text" /> 

В противном случае Chrome и край добавит DatePicker.Вместо того, чтобы использовать класс или идентификатор, чтобы идентифицировать его как DatePicker и сделать что-то вроде $(".datepicker").datepicker();

Answer 3

Как Cyptic я должен был изменить тип к тексту

<input type="text" class="datepicker"/> 

, а затем в JQuery

$("input.datepicker:text").datepicker({ 
    showOn: "both", 
    dateFormat: "dd MM yy", 
    changeMonth: true, 
    changeYear: true 
});