Question

我正在尝试在我的应用程序中实现MVC 4 WebGrid。在编辑模式下，我想在文本框中应用JQuery UI datepicker。

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

在剃刀中

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

一切正常，但在编辑模式下，JQuery UI datepicker仅在第一行工作。如果我在其他行中选择，则日期在第一行中生效。这些脚本在普通表单页面上也能正常工作。并显示错误消息

错误：无法设置未定义或空引用的属性“currentDay”

真的很混乱，不知道如何修复它。请帮我。感谢

了解更多信息：

@ user1778606是兄弟，与那个问题完全相同。如果我使用那个$('.date-picker').datepicker()代替 tr.find('.edit-mode').closest('.date-picker').datepicker()，没有错误，无论你更新哪一行，它都只会影响到第一行。所以我认为一个是同一个id，类问题。但如果我像上面那样改变了，就会出现这个错误

错误：无法设置未定义或null的属性“currentDay” 参考

无论这是第一行还是第二行，如何渲染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

我最近遇到了类似的问题。对我有用的是解决两个问题

在类选择器$（'。date_picker'）上调用.datepicker（）。datepicker（）
不删除已由datepicker分配的ID。

假设容器中有一些对象需要启用datepicker并为其分配日期，那么它们已经是datepickers，这对我有帮助：

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。你可能不想那样做。

JQuery UI datepicker在Razor WebGrid编辑模式下无效

1 个答案: