Loại Chrome = "date" và jquery ui date picker clashing

Question

Tôi có một hộp nhập có kiểu = "date", mọi thứ hoạt động tốt trong IE nhưng trong phiên bản Chrome mới nhất, nó đi kèm với một spinner, Down arrow và với một trình giữ chỗ của dd/mm/yyyy.

Trong Chrome, khi nhấp vào trường đó Chrome sẽ mở một trình ghi ngày tháng và tôi đã ánh xạ ngày tháng của jquery ui để sử dụng ứng dụng của tôi. Đây cả hai đều đụng vào chúng như hình dưới đây:

tôi đã áp dụng cách khắc phục như sau:

input[type="date"]::-webkit-calendar-picker-indicator{ 
    display:none; 
    -webkit-appearance: none; 
    margin: 0; 
} 
input[type="date"]::-webkit-inner-spin-button { 
    /* display: none; <- Crashes Chrome on hover */ 
    -webkit-appearance: none; 
    margin: 0; 
} 
/** THIS DOESN'T WORK **/ 
input[type="date"]::-webkit-input-placeholder{ 
    display:none !important; 
    -webkit-appearance: none !important; 
     visibility: hidden !important; 
} 
/** THIS DOESN'T WORK **/ 

Sau khi thêm đoạn mã trên, có vẻ như khôn ngoan:

Đoạn mã trên che giấu spinner và mũi tên bắn bộ chọn ngày của Chrome. Nhưng có một vấn đề, giữ chỗ ('mm/dd/yyyy') vẫn còn trong đó cho hộp văn bản đầu vào; bộ chọn ngày của jquery ui của tôi sắp xuất hiện nhưng khi tôi chọn bất kỳ ngày nào, trình giữ chỗ vẫn còn trong đó.

Không có giá trị nào được đặt trong hộp nhập đó.

Cần biết cách xóa trình giữ chỗ đó để đặt giá trị; cũng là định dạng ngày tôi đang sử dụng cho ứng dụng là yyyy/mm/dd.

Phiên bản Chrome là: Phiên bản 27.0.1448.0

Cảm ơn bạn trước !!!

Answer 1

tôi xử lý một cách khéo léo, tôi có trường ngày của tôi như type="text" và tôi đã thêm vào một thuộc tính là data-type="date"

Trong jquery, tôi đang chạy mã để tự động thay thế type="text & data-type="date" đến type="date", vì vậy trình duyệt không làm cho nó một lĩnh vực ngày tải nhưng jquery ui datepicker tôi được gọi như tôi đang tự động thêm vào nó như type="date" ... :)

Hy vọng nó sẽ có ích cho một ai đó ..

Answer 2

Chrome 27 bây giờ hỗ trợ datepicker kiểu trường (Cũng giống như Opera đã thực hiện)

Bạn có thể kiểm tra với modernizr.js nếu trường ngày được hỗ trợ. Modernizr.inputtypes.date trả về true nếu trường ngày được trình duyệt hỗ trợ.

Đoạn mã sau thiết JQuery UI datepicker chỉ khi trường ngày không được hỗ trợ:

<script src="modernizr.js"></script> 
<script>Modernizr.load({ 
    test: Modernizr.inputtypes.date, 
    nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js', 'jquery-ui.css'], 
    complete: function() { 
    $('input[type=date]').datepicker({ 
     dateFormat: 'yy-mm-dd' 
    }); 
    } 
}); 
</script> 

Using Modernizr to detect HTML5 features and provide fallbacks

Answer 3

Tôi gặp vấn đề tương tự. Trong mô hình/chế độ xem của tôi, tôi đã chỉ định loại dữ liệu là DataType.Date Tôi nhận thấy khi tôi xóa bộ chọn ngày này bắt đầu hoạt động trong Chrome. Tôi nghĩ đã thử thay đổi kiểu dữ liệu là DataType.DateTime và thử lại trong chrome. Điều này giải quyết được vấn đề. Không chắc chắn nếu điều này áp dụng cho bất cứ ai khác nhưng điều này gây ra cho tôi rất nhiều đau đầu vì vậy điều này có thể giúp một ai đó. này làm việc trong MVC4 sử dụng jQueryUI 1.8.20

Answer 4

Bạn chỉ có thể loại bỏ các loại "date" và chuyển đổi nó để "text" như trong fiddle sau: best of luck jsfiddle

removeDefaultDate = function(){ 
    $('input[type=date]').each(function(){ 
     this.type="text"; 
    }); 
    $('input[type=date]').datepicker({dateFormat: 'yy-mm-dd'}); 
} 

Answer 5

Anh là những gì tôi thường sử dụng. Tôi có một vài định dạng khác nhau của datepicker tôi sử dụng, vì vậy tôi không chăn nó cho tất cả các đầu vào ngày. Tuy nhiên, thay đổi bộ chọn thành những gì phù hợp nhất với bạn.

<script src="{YourPathHere}modernizr.js"></script> 
<script> 
$(function() {//DOM ready code 
    if (!Modernizr.inputtypes.date) {// Check to see if HTML5 is supported to use EF data annotations, if not use jQuery datepicker 
       $('.date-picker').datepicker(
        { 
         showButtonPanel: true, 
         gotoCurrent: true, 
         changeMonth: true, 
         changeYear: true, 
         showAnim: 'slideDown' 
        } 
       ); 
      } 
});// END DOM Ready 
</script>