Loại ngày nhập HTML5 can thiệp với jQuery Datepicker

Question

Tôi đang sử dụng trình ghi ngày tháng của giao diện người dùng jQuery cho các lựa chọn ngày trên trang web của tôi. Một trong những người dùng của tôi vừa mới nâng cấp lên phiên bản Chrome mới nhất, đã tích hợp công cụ chọn ngày gốc cho HTML5. Vấn đề lớn khi hai giao diện người dùng chồng lên nhau. Vấn đề khác là khi người dùng gửi một ngày, ngày trong cơ sở dữ liệu trở lại "0000-00-00" và đang tạo ra dữ liệu xấu.

Nếu tôi xóa trình chỉnh sửa ngày của jQuery, hầu hết người dùng không sử dụng trình duyệt mới nhất sẽ không có bộ chọn ngày bật lên. Và, những người có trình duyệt mới nhất sẽ có hai lịch chồng chéo làm vỡ ứng dụng. Câu hỏi của tôi là làm cách nào để vô hiệu hóa các trình duyệt mới nhất hiển thị chức năng ngày tháng được xây dựng sẵn và chỉ tiếp tục sử dụng jQuery Datepicker?

Answer 1

Sử dụng Modernizr hoặc thư viện tương tự để phát hiện xem trình duyệt có hỗ trợ input type=date và sau đó tải thanh công cụ ngày của giao diện người dùng jQuery nếu không.

if (!Modernizr.inputtypes.date) { 
    $('input[type=date]').datepicker(); 
} 

Answer 2

Hoặc chuyển đổi từ việc sử dụng input[type=date]-input[type=text] hoặc sử dụng Modernizr để phát hiện sự ủng hộ cho các datepicker bản địa. Tôi đã viết một bài về ý nghĩa của cả hai lựa chọn ở đây - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.

Answer 3

Đôi khi bạn không thể sửa đổi các loại biểu mẫu. Ví dụ, tôi đang sử dụng FormType của Symfony2 Bundle.

Tôi đã gặp sự cố này khi sử dụng Genemu jQuery Datepicker và tôi đã giải quyết vấn đề này bằng cách thêm nút hình ảnh lịch và một mã css.

You can see final result in this link

Ở đây bạn có thể đọc tài liệu hướng dẫn để thêm biểu tượng hình ảnh: jQuery UI Datepicker

Sau đó, tôi đơn giản thêm một css như thế này (có thể quy tắc phong cách sẽ khác nhau cho bạn):

form input[type=date] + img { 
    position: relative; 
    left: -25px; 
} 

Answer 4

Thêm thuộc tính novalidate vào biểu mẫu của bạn để xóa xác thực tích hợp của trình duyệt.

<form action="login.htm" novalidate> 

Xem này link để biết thêm thông tin.