DatePicker更改问题

时间:2014-06-24 06:29:07

标签: jquery jquery-ui datepicker jquery-ui-datepicker uidatepicker

我正在使用Asp .net MVC3。我在视图页面上有下表,

      <table>
      <tr>
      <th>Id</th>
      <th>Name</th>
      <th>date1</th>
      <th>date2</th>
       </tr>
      @foreach(var item in Model.data)
      {
      <tr>
      <td>@item.Id</td>
      <td>@item.Name</td>
      @if(@item.date1==""){
         <td><input type="text" name="date1" class="date1"></td>
         }
      else{
<td>@Html.TextBox("date1",item.date1, new { @class="date1" })</td>
      }
       @if(@item.date2==""){
       <td><input type="text" name="date2" class="date2"></td>
         }
          else{
<td>@Html.TextBox("date2",item.date2, new { @class="date2" })</td>
         }
                </tr>
       }
      </table>

以下是我正在使用的日期选择器jquery,

 $(function () {
    $(".date1").datepicker({
        dateFormat: 'dd/M/yy'
    });
    $(".date2").datepicker({
        dateFormat: 'dd/M/yy'
    });
});

第一次选择第一行的日期时,所选日期会在正确的文本框中更新。但是当我更改第二行的现有日期值时,日期更改会发生在第一行文本框中。

1 个答案:

答案 0 :(得分:0)

试试这个:

    <table>
          <tr>
          <th>Id</th>
          <th>Name</th>
          <th>date1</th>
          <th>date2</th>
           </tr>
          @foreach(var item in Model.data)
          {
          <tr>
          <td>@item.Id</td>
          <td>@item.Name</td>
          <td><input type="text" id="date1" name="date1" class="date1" value="@item.date1=="" ? "" : @item.date1"/></td>
          <td><input type="text" id="date2" name="date2" class="date2" value="@item.date2=="" ? "" : @item.date2"/></td>
          </tr>
           }
          </table>

$(function () {
    $("#date1").datepicker({
        dateFormat: 'dd/M/yy'
    });
    $("#date2").datepicker({
        dateFormat: 'dd/M/yy'
    });
});