JQuery UI日期选择器未在Razor WebGrid编辑模式下工作

我正在尝试在我的应用程序中实现MVC4WebGrid。在编辑模式下，我想在文本框中应用jQueryUIDatePicker

在Javascript中

剃刀

@{
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>

---

我最近也有类似的问题。对我有效的是解决了两个问题

在类选择器$（'.date_picker'）.datepicker（）上调用.datepicker（）

不删除日期选择器已分配的id

假设容器中存在我希望启用日期选择器并为其分配日期的对象，但它们可能已经是日期选择器，以下是我的帮助：

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);
    });
};

---

我看到您正在为多个输入分配相同的id。你可能永远都不想这样做。

你介意发布一些呈现的html吗，我想检查日期选择器的id是否不同-根据这个链接@user1778606，请检查问题，我刚刚更新。哇！早上好，从这里开始。你让我开心：）@jhnwsk谢谢你的解决方案

<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"/>

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);
    });
};