Datepicker не работает над коллекцией предметов

Question

скриптами в моем макете:

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.9.1.js"></script> 
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 

@Styles.Render("~/Content/themes/base/css") 

<script type="text/javascript"> 
    $(function() { 
     $('.datepicker').each(function() { 
      $(this).datepicker({ 
       changeMonth: true, 
       changeYear: true 
      }); 
     }); 
     $('#datePicker').datepicker({ 
      changeMonth: true, 
      changeYear: true 
     }); 
    }); 
</script> 

В представлении в моем приложении, я возвращать список элементов, который включает в себя эту модель:

public partial class COLLECTION DETAIL 
{ 
    (...) 
    public System.DateTime DATE_ADDED { get; set; } 
    public System.DateTime DATE_EXPIRE { get; set; } 
    (...) 
} 

И эта модель визуализируется как этот

@for (int i = 0; i < Model.COLLECTION.Count; i++) 
{ 
    <div> 
     Added: @Model.COLLECTION[i].DATE_ADDED.ToShortDateString() 
    </div> 
    <div> 
     Expire: 
     <input type="text" id="datePicker" value="@Model.COLLECTION[i].DATE_EXPIRE.ToShortDateString()"/> 
    </div> 
} 

DatePicker прекрасно работает для первого элемента коллекции, но не для т он других из-за ID. И если я использую класс вместо этого, datepicker теперь не работает. Может ли кто-нибудь помочь мне сделать все это? Мне нужно установить новую дату (как показано), а затем опубликовать данные в методе POST.

Answer 1

Упростите ваш JavaScript. Нет необходимости в цикле (.each()..), так как datepicker уже применяется к массиву выбранных элементов.

$('.datepicker').datepicker({ 
      changeMonth: true, 
      changeYear: true 
}); 

Измените ID на класс в HTML. Проверьте корпус:

<div> 
    Expire: 
    <input type="text" class="datepicker" value="@Model.COLLECTION[i].DATE_EXPIRE.ToShortDateString()"/> 
</div> 

Answer 2

Это работало для меня, вот DEMO and JSFIDDLE

$(function() { 
     $('.datepicker').datepicker({ 
       changeMonth: true, 
       changeYear: true 
      }); 
     });