0

我正在尝试在我的应用程序中实现 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，类问题。但是如果我像上面那样改变，就会出现这个错误

错误：无法设置未定义或空引用的属性“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"/>
4

1 回答 1

2

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

  1. 在类选择器 $('.date_picker').datepicker() 上调用 .datepicker()
  2. 不删除已由 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。你可能永远不想这样做。

于 2013-07-02T10:07:01.783 回答