rõ ràng giá trị của loại đầu vào ngày trong Microsoft Edge

Question

Microsoft Edge sẽ hiển thị một bảng chọn ngày HTML5 để nhập các giá trị cho các đầu vào được xác định bởi

<input type="date"> 

Có cách nào để hiển thị một nút rõ ràng hoặc một 'x' trang trí để xóa giá trị sau đó, giống như nó được thực hiện bởi Google Chrome?

Answer 1

Các lựa chọn tốt nhất ở đây có lẽ là để ẩn dấu ấn rõ ràng tùy chỉnh được cung cấp bởi Chrome, và cung cấp riêng của bạn cho tất cả các trình duyệt để sử dụng thay vì:

input::-webkit-clear-button { 
    display: none; 
} 

Sau đó, bạn sẽ cung cấp riêng nút rõ ràng của bạn:

<input type="date" required /> 
<button>Clear</button> 

Và cuối cùng, một mảnh nhỏ của logic để xóa các đầu vào bất cứ khi nào nút được click:

(function() { 

    "use strict"; 

    var elmnt = document.querySelector("input"); 
    var clear = document.querySelector("button"); 

    clear.addEventListener("click", function (event) { 
     elmnt.value = ""; 
    }); 

}()); 

Tôi hy vọng điều này sẽ hữu ích.

Fiddle: http://jsfiddle.net/zcay9qc5/