Question

I have just started using the
<% Html.DevExpress().DateEdit()
control and i got it to work fine in my ASP.Net MVC application. The code is as shown below:

aspx page:

<% Html.DevExpress().DateEdit(settings =>
{
settings.Name = "EndDate";
settings.Properties.NullText = "dd/MM/yyyy";
settings.Properties.EditFormat = EditFormat.Custom;
settings.Properties.EditFormatString = "dd/MM/yyyy";
settings.Properties.DisplayFormatString = "dd/MM/yyyy";
settings.Date = Model.EndDate;
settings.Width = 100;
}
).Render();
%>

Above this code i have a reference to my javascript file (DateChanges.js) in this file i want to be able to do something like:

$(document).ready(function(){
    $("#EndDate").change(function(){
        //do whatever i want
    });

})

I cant do this now cause using firefox i can see that the actual textbox that this datepicker assigns a value to has be named “EndDate_I”. So my question is how can i easily do this since i want to be able to catch the change event of this control and play around with it in jQuery??

Answer 1

The DevExpress MVC Extensions offer their own infrastructure for the client-side processing needs (see the http://help.devexpress.com/#AspNet/CustomDocument6908 help topic to getting started).

It is necessary to handle the client-side ASPxClientDateEdit.DateChanged event, and retrieve the newly selected Date via the client-side ASPxClientDateEdit.GetDate() method. Use the retrieved js Date object for your additional needs:

<script type="text/javascript">
    function OnDateChanged(s, e) {
        var newDate = s.GetDate();
        alert(newDate);
    }
</script>

settings.Properties.ClientSideEvents.DateChanged = "OnDateChanged";