title: JQuery UI datepicker is not working in Razor WebGrid edit mode
body: <p>I'm trying to implement MVC 4 WebGrid in my application. In edit mode, I want to apply JQuery UI datepicker in textbox.</p>
  
  <p>In Javascript
         </p>
  
  <pre><code>$(function () {
      $('.edit-mode').hide();
      $('.edit-reg, .cancel-reg').on('click', function () {
          var tr = $(this).parents('tr:first');
          tr.find('.edit-mode, .display-mode').toggle();
  
          tr.find('.edit-mode').closest('.date-picker').datepicker({
              changeMonth: true,
              changeYear: true,
              showButtonPanel: true,
              dateFormat: 'd M yy',
              showStatus: true,
              showWeeks: true,
              highlightWeek: true,
              numberOfMonths: 1,
              showAnim: "scale",
              showOptions: {
                  origin: ["top", "left"]
              }
          });
      });        
  })
  </code></pre>
  
  <p></p>
  
  <p>In Razor</p>
  
  <pre><code>@{
  var grid = new WebGrid(Model);
  }
  
  &lt;div id="gridContent"&gt;
      @grid.GetHtml(
          tableStyle: "webgrid-table",
          headerStyle: "webgrid-header",
          footerStyle: "webgrid-footer",
          alternatingRowStyle: "webgrid-alternating-row",
          selectedRowStyle: "webgrid-selected-row",
          rowStyle: "webgrid-row-style",
          mode: WebGridPagerModes.All,
          columns:grid.Columns(
              grid.Column("FormID", 
                  format: @&lt;text&gt;
                              &lt;span class="display-mode"&gt;@item.FormID &lt;/span&gt;
                              &lt;label id="FormID" class="edit-mode"&gt;@item.FormID&lt;/label&gt;
                          &lt;/text&gt;, style: "col1Width"),
              grid.Column("GenreName", 
                  format: @&lt;text&gt;  
                              &lt;span class="display-mode"&gt;@item.Genre.Name &lt;/span&gt;
                              &lt;label id="GenreName" class="edit-mode"&gt;@item.Genre.Name&lt;/label&gt;
                          &lt;/text&gt;, style: "col1Width"),
              grid.Column("JobNo", 
                  format: @&lt;text&gt;  
                              &lt;span class="display-mode"&gt;@item.JobNo &lt;/span&gt;
                              &lt;label id="JobNo" class="edit-mode"&gt;@item.JobNo&lt;/label&gt;
                          &lt;/text&gt;, style: "col1Width"),
              grid.Column("Description", 
                  format: @&lt;text&gt;  
                              &lt;span class="display-mode"&gt;@item.Description &lt;/span&gt;
                              &lt;label id="Description" class="edit-mode"&gt;@item.Description&lt;/label&gt;
                          &lt;/text&gt;, style: "col1Width"),
              grid.Column("Requester", 
                  format: @&lt;text&gt;
                              &lt;span class="display-mode"&gt;@item.Requester &lt;/span&gt;
                              &lt;label id="Requester" class="edit-mode"&gt;@item.Requester&lt;/label&gt;
                          &lt;/text&gt;, style: "col1Width"),
              grid.Column("RegisteredDate", "Registered Date", 
                  format: @&lt;text&gt;  
                              &lt;span class="display-mode"&gt;
                                  &lt;label id="lblRegisteredDate"&gt;@item.RegisteredDate&lt;/label&gt;
                              &lt;/span&gt;
                              &lt;input type="text" id="txtRegisteredDate" value="@item.RegisteredDate" class="edit-mode date-picker" style="width:100px;" /&gt;
                          &lt;/text&gt;, style: "col2Width"),
              grid.Column("DeregisteredDate", "De-registered Date", 
                  format: @&lt;text&gt; 
                              &lt;span class="display-mode"&gt;
                                  &lt;label id="lblDeregisteredDate"&gt;@item.DeregisteredDate&lt;/label&gt;
                              &lt;/span&gt;
                              &lt;input type="text" id="txtDeregisteredDate" value="@item.DeregisteredDate" class="edit-mode date-picker" style="width:100px;" /&gt;
                          &lt;/text&gt;, style: "col2Width"),
              grid.Column("Status", 
                  format: @&lt;text&gt;  
                              &lt;span class="display-mode"&gt;@item.Status &lt;/span&gt;
                              &lt;label id="Status" class="edit-mode"&gt;@item.Status&lt;/label&gt;
                          &lt;/text&gt;, style: "col1Width"),
              grid.Column("Action", 
                  format: @&lt;text&gt;
                              &lt;button class="edit-reg display-mode"&gt;Edit&lt;/button&gt;
                              &lt;button class="save-reg edit-mode"&gt;Save&lt;/button&gt;
                              &lt;button class="cancel-reg edit-mode"&gt;Cancel&lt;/button&gt;
                          &lt;/text&gt;, style: "col3Width", canSort: false)
      ))
  &lt;/div&gt;
  </code></pre>
  
  <p>Everything is working fine but in edit mode, JQuery UI datepicker is working in first row only. If I choose in other rows, the date is effected in first row. And those scripts are working fine on normal form page also. And the error message shows </p>
  
  <blockquote>
    <p>Error: Unable to set property 'currentDay' of undefined or null reference</p>
  </blockquote>
  
  <p>Really confusing and don't know how to fix it. Please help me. Thanks</p>
  
  <p>for more explanation : </p>
  
  <p>@user1778606 yes bro, definitely same with that problem. If I used like that <code>$('.date-picker').datepicker()</code> instead of 
  <code>tr.find('.edit-mode').closest('.date-picker').datepicker()</code> , there is no error and whatever row u update, it will affect to first row only. So I thought that one is same id, class problem. 
  But if I changed like above, this error appears</p>
  
  <blockquote>
    <p>Error: Unable to set property 'currentDay' of undefined or null
    reference</p>
  </blockquote>
  
  <p>Whatever here is first row and second row how rendered html</p>
  
  <pre><code>&lt;input class="edit-mode date-picker hasDatepicker" id="txtRegisteredDate" style="width: 100px; display: none;" type="text"/&gt;
  
  &lt;input class="edit-mode date-picker hasDatepicker" id="txtRegisteredDate" style="width: 100px; display: inline-block;" type="text"/&gt;
  </code></pre>