如何使用日期字段设置 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");
});

但只有当我也手动更改输入时才会触发它。

我尝试获取日期选择器并在其上添加事件（我在文档中看到它有一个“onSelect”事件），但它破坏了生成的组件。

此编辑的最后一次尝试：获取现有的日期选择器选项并添加我的事件

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

我将该代码放在document.ready 上，但$("#AvailableEndDateTimeUtc-parent").data("datetimepicker") 返回“未定义”。但是如果我在控制台中做同样的事情，它会返回组件。

Answer 1

试试这个。看来您为 onchange 函数使用了错误的 ID。

你使用的是#AvailableEndDateTimeUtc而不是#AvailableEndDateTimeUtc-parent

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

Answer 2

也许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>