Question

To the question started, my code (I’ll try to only include relevant portions to start), starting with my script:

function RaceDate_onChange() {
    var pickedDate = $(this).data('tDatePicker').value();
    var month = pickedDate.getMonth() + 1;
    $.get("/RaceCard/Details?year=" + pickedDate.getFullYear() + "&month=" + month + "&day=" + pickedDate.getDate());
}

Then my markup:

@Html.Telerik().DatePickerFor(model => model.RaceDate).ClientEvents(events => events.OnChange("RaceDate_onChange"))

And finally a bit of the receiving action:

[HttpGet]
public ActionResult Details(int year, int month, int day)
{
    var viewModel = new RaceCardModel {Metadata = DetailModelMetadata.Display, RaceDate = new DateTime(year, month, day)};

I’m trying to get the selection of a new date to trigger a GET, to refresh the page without submitting a form. This works fine, except for this problem:

In GET requests to the Details action, the day value is always one day behind the DatePicker. E.g. The first value is set from a view model property, when the view is rendered, say 3. I then click on 14 and hit my breakpoint in the action method. The day value is 3. When I click on 29 and hit the breakpoint, the day value is 14.

Besides asking what is wrong, I’ll take a liberty and ask if there is a better way that is no more complicated. I am fairly novice and would rather deliver working code that needs revision than get bogged down in tangents and details.

Answer 1

Try using e.value instead as shown in the client-side events example. You are probably using an older version where the value() method returned the previous value during the OnChange event.

UPDATE:

“e.value” means the value field of the OnChange arguments:

function onChange(e) {
   var date = e.value; // instead of datePicker.value()
}