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.

I'm pretty sure this is a jQuery datepicker underneath, so: https://stackoverflow.com/questions/6471959/jquery-datepicker-onchange-event-issue — Andrei, Mar 22 '18 at 14:31
Is the generated datepicker a plugin? It may well be intercepting the click event. If it is a plugin, it should have a way of manipulating the events as part of the api. — RickL, Mar 22 '18 at 14:41
I don't know if it's a plugin behind, I'm looking to know if it's a jQuery datePicker as @Andrei said — Pierre-Adrien Maison, Mar 22 '18 at 14:45
It looks like you need to call `OnChangeEvent()` from a change event handler for `$("#AvailableEndDateTimeUtc-parent")` also. Is this a bootstrap-datetimepicker, jquery or some other one? — Daniel Gale, Mar 22 '18 at 15:29

Daniel Gale · Answer 1 · 2018-03-23T18:22:09.630

0

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>

edited Mar 23 '18 at 18:22

answered Mar 22 '18 at 14:51

Daniel Gale

643
4
13

It's exactly what I'm doing. – Pierre-Adrien Maison Mar 22 '18 at 15:01
The `$('#AvailableEndDateTimeUtc-parent').change(...` is triggered when I manually change the value in the input and not when I select in the calendar. – Pierre-Adrien Maison Mar 23 '18 at 08:19

score 0 · Answer 2 · answered Mar 22 '18 at 16:32

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>

The `$('#AvailableEndDateTimeUtc-parent').change(...` is triggered when I manually change the value in the input and not when I select in the calendar. — Pierre-Adrien Maison, Mar 23 '18 at 08:19

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

2 Answers2