JQuery UI datepicker is not working in Razor WebGrid edit mode

Question

I'm trying to implement MVC 4 WebGrid in my application. In edit mode, I want to apply JQuery UI datepicker in textbox.

In Javascript

$(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"]
            }
        });
    });        
})

In Razor

@{
var grid = new WebGrid(Model);
}

<div id="gridContent">
    @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: @<text>
                            <span class="display-mode">@item.FormID </span>
                            <label id="FormID" class="edit-mode">@item.FormID</label>
                        </text>, style: "col1Width"),
            grid.Column("GenreName", 
                format: @<text>  
                            <span class="display-mode">@item.Genre.Name </span>
                            <label id="GenreName" class="edit-mode">@item.Genre.Name</label>
                        </text>, style: "col1Width"),
            grid.Column("JobNo", 
                format: @<text>  
                            <span class="display-mode">@item.JobNo </span>
                            <label id="JobNo" class="edit-mode">@item.JobNo</label>
                        </text>, style: "col1Width"),
            grid.Column("Description", 
                format: @<text>  
                            <span class="display-mode">@item.Description </span>
                            <label id="Description" class="edit-mode">@item.Description</label>
                        </text>, style: "col1Width"),
            grid.Column("Requester", 
                format: @<text>
                            <span class="display-mode">@item.Requester </span>
                            <label id="Requester" class="edit-mode">@item.Requester</label>
                        </text>, style: "col1Width"),
            grid.Column("RegisteredDate", "Registered Date", 
                format: @<text>  
                            <span class="display-mode">
                                <label id="lblRegisteredDate">@item.RegisteredDate</label>
                            </span>
                            <input type="text" id="txtRegisteredDate" value="@item.RegisteredDate" class="edit-mode date-picker" style="width:100px;" />
                        </text>, style: "col2Width"),
            grid.Column("DeregisteredDate", "De-registered Date", 
                format: @<text> 
                            <span class="display-mode">
                                <label id="lblDeregisteredDate">@item.DeregisteredDate</label>
                            </span>
                            <input type="text" id="txtDeregisteredDate" value="@item.DeregisteredDate" class="edit-mode date-picker" style="width:100px;" />
                        </text>, style: "col2Width"),
            grid.Column("Status", 
                format: @<text>  
                            <span class="display-mode">@item.Status </span>
                            <label id="Status" class="edit-mode">@item.Status</label>
                        </text>, style: "col1Width"),
            grid.Column("Action", 
                format: @<text>
                            <button class="edit-reg display-mode">Edit</button>
                            <button class="save-reg edit-mode">Save</button>
                            <button class="cancel-reg edit-mode">Cancel</button>
                        </text>, style: "col3Width", canSort: false)
    ))
</div>

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

Error: Unable to set property 'currentDay' of undefined or null reference

Really confusing and don't know how to fix it. Please help me. Thanks

for more explanation :

@user1778606 yes bro, definitely same with that problem. If I used like that $('.date-picker').datepicker() instead of tr.find('.edit-mode').closest('.date-picker').datepicker() , 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

Error: Unable to set property 'currentDay' of undefined or null reference

Whatever here is first row and second row how rendered html

<input class="edit-mode date-picker hasDatepicker" id="txtRegisteredDate" style="width: 100px; display: none;" type="text"/>

<input class="edit-mode date-picker hasDatepicker" id="txtRegisteredDate" style="width: 100px; display: inline-block;" type="text"/>

Answer 1

I had a similar problem recently. What worked for me is fixing two problems

1. Calling .datepicker() on a class selector $('.date_picker').datepicker()
2. Not removing the id already assigned by datepicker.

Assuming there are objects inside a container that I want to enable datepicker on and assign a date to BUT they can already be datepickers here's what helped me:

var handleDatePickers = function (container) {
    $.datepicker.setDefaults({
        dateFormat: 'dd/mm/yy'
    });
    $('.date-picker').each(function (i, obj) {
        var date = obj.defaultValue;
        $(obj).removeClass('hasDatepicker').attr("id","").datepicker();
        $(obj).datepicker('setDate', date);
    });
};

I see you are assigning the same id to multiple inputs. You probably don't want to do that ever.