如何使用Date字段设置Razor“EditorFor”的“onchange”事件？

I have a razor EditorFor for a field of type Date :

我有一个类型为Date的字段的剃刀EditorFor:

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

I want to set a "change" event on the generated datepicker but I don't find a solution to get an event when the value in the input is changed manually OR with the calendar.

我想在生成的datepicker上设置“更改”事件,但是当手动更改输入中的值或使用日历时,我找不到获取事件的解决方案。

I tried with a JavaScript listener :

我尝试使用JavaScript监听器:

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

It work with a manually change in the input but not with the calendar.

它可以手动更改输入,但不能使用日历。

I tried to add the "onchange" event

我试图添加“onchange”事件

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

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

But it doesn't work at all.

但它根本不起作用。

Here is the generated HTML code :

这是生成的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>

EDIT 1

This code is generate when I use this syntax :

使用此语法时生成此代码:

@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 });
});

EDIT 2

I tried to add that code :

我试图添加该代码:

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

But it is triggered only when I do a manual change in the input too.

但只有当我在输入中进行手动更改时才会触发它。

I tried to get the datepicker and add the event on it (I saw in the docs that it has a 'onSelect' event) but it breaks the generated component.

我试图获取datepicker并在其上添加事件(我在文档中看到它有一个'onSelect'事件)但它打破了生成的组件。

Last attempt for this edit : get the existing datepicker options and add my event

上次尝试进行此编辑:获取现有的datepicker选项并添加我的事件

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

I put that code on the document.ready but $("#AvailableEndDateTimeUtc-parent").data("datetimepicker") return "undefined". But if I do the same in the console, it returns the component.

我把那些代码放在document.ready但是$(“#AvailableEndDateTimeUtc-parent”)。data(“datetimepicker”)返回“undefined”。但是如果我在控制台中执行相同的操作,它将返回组件。

2 个解决方案

#1

Try this one. it seems you are using wrong id for onchange function.

试试这个。看来你在onchange函数中使用了错误的id。

instead of using #AvailableEndDateTimeUtc-parent you are using #AvailableEndDateTimeUtc

而不是使用#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>

#2

Perhaps the onChangeDateTime setting will allow you to call the OnChangeEvent().

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

#1