Làm thế nào để bạn vô hiệu hóa datepicker trong Microsoft Edge?

Question

Tôi có một số yếu tố đầu vào với loại = "ngày" và muốn tắt bộ chọn ngày mặc định trong Microsoft Edge vì tôi đang sử dụng công cụ datepicker của jQuery. Làm cách nào để tắt tính năng này bằng CSS hoặc JavaScript? Nó hoạt động tốt trong Chrome và Firefox chứ không phải Edge. Mọi câu trả lời sẽ được trân trọng.

Một làm việc 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

Không thể vô hiệu hóa việc kiểm soát datepicker mẹ đẻ chức năng trong Edge (although Chrome can via a hack) - anyway.

Điều khiển nhập, trừ khi được trình duyệt thiết kế thường dựa trên/là các điều khiển hệ thống. Điều này có nghĩa là một datepicker đầu vào là một datepicker đầu vào, và một danh sách thả xuống select là một danh sách thả xuống select.

Hầu hết các điều khiển được giới hạn trong tùy chỉnh ngoài kiểu dáng cơ bản như đường viền, đệm và kiểu phông chữ và các thuộc tính tiêu chuẩn HTML, ví dụ: placeholder.

Bạn có một vài lựa chọn:

Rời khỏi sự kiểm soát datepicker mặc định như-là

Đây là tùy chọn, tôi sẽ khuyên. Gắn bó với các điều khiển hệ thống mặc định (+ kiểu dáng nếu có) thường là chính sách tốt nhất. Điều này đảm bảo khả năng tương thích thiết bị tối đa và sự quen thuộc đối với người dùng của bạn. Thêm vào đó, mọi thứ bình thường 'chỉ hoạt động'.

Cũng có ít chi phí hơn trong mã JS của bạn.

Ác Tùy chọn: Trình duyệt Detection

Bạn thể phát hiện nếu trình duyệt là Edge trong mã JS của bạn, và sau đó nói với nó để render sự kiểm soát jQuery để thay thế. Bạn nên tránh điều này trừ khi bạn thực sự cần nó, khi phát hiện trình duyệt trở nên lỗi thời và một cơn ác mộng bảo trì khá nhanh.

Answer 2

Loại đầu vào phải là văn bản chứ không phải ngày. Này ...

<input type="date" /> 

Nên

<input type="text" /> 

Nếu Chrome và Edge sẽ thêm một datepicker.Thay vì sử dụng một lớp hoặc id để xác định nó như datepicker và làm điều gì đó như $(".datepicker").datepicker();

Answer 3

Như với Cyptic tôi phải thay đổi kiểu văn bản

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

Và sau đó trong JQuery

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