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 の日付ピッカーは最初の行でのみ機能しています。他の行で選択すると、日付は最初の行で有効になります。また、これらのスクリプトは通常のフォーム ページでも正常に動作します。そして、エラーメッセージが表示されます

エラー: 未定義または null 参照のプロパティ 'currentDay' を設定できません

本当に混乱していて、それを修正する方法がわかりません。私を助けてください。ありがとう

詳細については:

@ user1778606はい仲間、間違いなくその問題と同じです。$('.date-picker').datepicker()の代わりに そのように使用した場合tr.find('.edit-mode').closest('.date-picker').datepicker()、エラーは発生せず、どの行が更新されても、最初の行のみに影響します。だから私は同じID、クラスの問題だと思った。しかし、上記のように変更すると、このエラーが表示されます

エラー: 未定義または null 参照のプロパティ 'currentDay' を設定できません

ここにあるものは何でも、最初の行と2番目の行がどのように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

最近、同様の問題がありました。私にとってうまくいったのは、2つの問題を修正することです

  1. クラスセレクタ $('.date_picker').datepicker() で .datepicker() を呼び出す
  2. datepicker によって既に割り当てられている ID を削除しません。

コンテナ内にdatepickerを有効にして日付を割り当てたいオブジェクトがあると仮定しますが、それらはすでにdatepickerである可能性があります。

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 に答える