jQuery datepicker cho nhiều đầu vào

Question

Tôi có một kịch bản datepicker jQuery:

  $(function() { 
       $("#datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
      }); 

Khi tôi muốn khởi tạo kịch bản này cho hai đầu vào, nó hoạt động chỉ dành cho người đầu tiên. Làm thế nào để sử dụng nó cho cả hai đầu vào?

<input type="text" name="MyDate1" id="datepicker"> 
<input type="text" name="MyDate2" id="datepicker"> 

Answer 1

Chỉ cần thay đổi tất cả id thành class.

<input type="text" name="MyDate1" class="datepicker"> 
<input type="text" name="MyDate2" class="datepicker"> 

$(function() { 
    $(".datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
}); 

cũng có thể sử dụng

$(function() { 
    $("input[name^=MyDate]").datepicker({ dateFormat: "yyyy-mm-dd" }); 
}); 

Answer 2

Nó không phải là hợp lệ để có ID nhân đôi. Bạn nên thêm một lớp thay vì:

<input type="text" name="MyDate1" class="datepicker" id="datepicker1"> 
<input type="text" name="MyDate2" class="datepicker" id="datepicker2"> 

Sau đó, bạn có thể làm:

 $(function() { 
      $(".datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
     }); 

Answer 3

Mệt mỏi vì lặp đi lặp lại điều này, nhưng vẫn còn, đang lặp lại nó một lần nữa. id s phải là duy nhất. Vì vậy, sử dụng này:

<input type="text" name="MyDate1" class="datepicker"> 
<input type="text" name="MyDate2" class="datepicker"> 

với

$(function() { 
    $(".datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
}); 

Answer 4

Tiếp cận datepicker chức năng theo Tên:

$(function() { 
     $('[name="MyDate1"]').datepicker({ dateFormat: "yyyy-mm-dd" }); 
     }); 

Answer 5

Bạn cũng có thể thêm các lớp học một cách nhanh chóng nếu các lĩnh vực đầu vào được tạo động, chẳng hạn như trong các mẫu Django.

<input type="text" name="MyDate1" id="datepicker1"> 
<input type="text" name="MyDate2" id="datepicker2"> 

Nhận lĩnh vực đầu vào sử dụng #ID và thêm một lớp

$(function() { 
    $("#datepicker1, #datepicker2").addClass('datepicker'); 
    $(".datepicker").datepicker({ dateFormat: "yy-mm-dd" }); 
}); 

Answer 6

<script> 
    $(document).ready(function() { 
    $("#datepicker").datepicker(); 
    }); 
    $(document).ready(function() { 
    $("#datepicker2").datepicker(); 
    }); 
    $(document).ready(function() { 
    $("#datepicker3").datepicker(); 
    }); 
    </script> 

Và chỉ cần cung cấp các hình thức của id: datepicker datepicker2 datepicker3