如何设置带有“日期”字段的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>