How do I set an “onchange” event of a Razor “EditorFor” with a Date field?

Question

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

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

I tried with a JavaScript listener :

$("#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

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

or

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

But it doesn't work at all.

Here is the generated HTML code :

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

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

$("#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.

Answer 1

Perhaps the onChangeDateTime setting will allow you to call the 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

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

instead of using #AvailableEndDateTimeUtc-parent you are using #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>