如何設置帶有“日期”字段的Razor“ EditorFor”的“ onchange”事件？

Question

我有一個剃刀EditorFor類型的日期字段：

@Html.EditorFor(model => model.AvailableEndDateTimeUtc)

我想在生成的日期選擇器上設置一個“更改”事件，但是當輸入中的值手動更改或隨日歷更改時，我找不到找到事件的解決方案。

我嘗試使用JavaScript偵聽器：

$("#AvailableEndDateTimeUtc").on("change", function () {
    alert("ok");
});

它可以手動更改輸入內容，但不能使用日歷。

我試圖添加“ onchange”事件

@Html.EditorFor(model => model.AvailableEndDateTimeUtc, new { onchange = "myFunction" })

要么

@Html.EditorFor(model => model.AvailableEndDateTimeUtc, new { onchange = "myFunction()" })

但這根本不起作用。

這是生成的HTML代碼：

<div class="input-append date" id="AvailableEndDateTimeUtc-parent" data-date="">
    <input class="span2 valid" data-val="true" data-val-date="The field 'Date de fin de disponibilité' must be a date." id="AvailableEndDateTimeUtc" name="AvailableEndDateTimeUtc" type="text" value="" aria-describedby="AvailableEndDateTimeUtc-error" aria-invalid="false">
    <span class="add-on"><i class="fa fa-calendar"></i></span>
</div>

編輯1

當我使用以下語法時，將生成此代碼：

@Html.EditorFor(model => model.AvailableEndDateTimeUtc, new { onchange = "OnChangeEvent()" })

$(function () {
    var c = Globalize.culture().calendars.standard;
    var fmt = c.patterns["d"];
    $("#AvailableEndDateTimeUtc-parent").datetimepicker({ 
        language: 'glob', 
        format: fmt,
        pickDate: true, 
        pickTime: false, 
        pickSeconds: false, 
        pick12HourFormat: false,
        maskInput: true, 
        collapse: true });
});

編輯2

我試圖添加該代碼：

$('#AvailableEndDateTimeUtc-parent').change(function () {
    alert("Select change");
});

但是它也只有在我也手動更改輸入時才觸發。

我試圖獲取datepicker並在上面添加事件（我在文檔中看到它具有'onSelect'事件），但是它破壞了生成的組件。

此編輯的最后嘗試：獲取現有的datepicker選項並添加我的事件

$("#AvailableEndDateTimeUtc-parent").data("datetimepicker").options.OnChangeDate = function() {
    alert("Select change");
}

我將該代碼放在document.ready上，但是$("#AvailableEndDateTimeUtc-parent").data("datetimepicker")返回“ undefined”。 但是，如果我在控制台中執行相同的操作，它將返回該組件。

Answer 1

也許onChangeDateTime設置將允許您調用OnChangeEvent（）。

@Html.EditorFor(model => model.AvailableEndDateTimeUtc)

<script type="text/javascript">
$('#AvailableEndDateTimeUtc').change(function(){
    OnChangeEvent();
});


$(function () {
    var c = Globalize.culture().calendars.standard;
    var fmt = c.patterns["d"];
    $("#AvailableEndDateTimeUtc-parent").datetimepicker({ 
        onChangeDateTime: OnChangeEvent, /* Add onChangeDateTime event */
        language: 'glob', 
        format: fmt,
        pickDate: true, 
        pickTime: false, 
        pickSeconds: false, 
        pick12HourFormat: false,
        maskInput: true, 
        collapse: true });
});


function OnChangeEvent(){
    alert('Changed!');
}

</script>

Answer 2

試試這個。 似乎您為onchange函數使用了錯誤的ID。

而不是使用#AvailableEndDateTimeUtc-parent ，而是使用#AvailableEndDateTimeUtc

@Html.EditorFor(model => model.AvailableEndDateTimeUtc)

<script type="text/javascript">


$(function () {
    var c = Globalize.culture().calendars.standard;
    var fmt = c.patterns["d"];
    $("#AvailableEndDateTimeUtc-parent").datetimepicker({ 
        language: 'glob', 
        format: fmt,
        pickDate: true, 
        pickTime: false, 
        pickSeconds: false, 
        pick12HourFormat: false,
        maskInput: true, 
        collapse: true });
});
$('#AvailableEndDateTimeUtc-parent').change(function(){
    // do your logic here
});
</script>