I have a UI where I am allowing the filtering of date by DateTime range. I have followed the example in the Kendo UI Demo to ensure that the range is enforced. What I am attempting to do is add a "Reset" button to this UI that will reset the values of the DateTimePicker's to the default range. I have researched and read multiple articles/posts, and I am still unable to resolve my issue. I can't seem to pinpoint why this is happening, but most of the time, the value of the DateTimePicker after calling .value() is null.
Here is my code:
Here is my code:
function
resetDateTimePickersToDefaultDateTimeRange() {
var
currentDate =
new
Date(),
yesterdayDate =
new
Date(),
dateTimeFormat =
'MM/dd/yyyy hh:mm tt'
;
yesterdayDate.setDate(yesterdayDate.getDate() - 1);
var
$startDateTimePicker = $(
'#StartDateTimePicker'
).data(
'kendoDateTimePicker'
);
var
$endDateTimePicker = $(
'#EndDateTimePicker'
).data(
'kendoDateTimePicker'
);
$endDateTimePicker.value(kendo.toString(currentDate, dateTimeFormat));
$endDateTimePicker.trigger(
'change'
);
$startDateTimePicker.value(kendo.toString(yesterdayDate, dateTimeFormat));
$startDateTimePicker.trigger(
'change'
);
}
And just for completeness, here are the change events I have wired up for each of the DateTimePicker's:
function
kendoStartDateTimePickerChange() {
var
endPicker = $(
'#EndDateTimePicker'
).data(
'kendoDateTimePicker'
),
startDate = $(
'#StartDateTimePicker'
).data(
'kendoDateTimePicker'
).value();
if
(startDate) {
startDate =
new
Date(startDate);
startDate.setDate(startDate.getDate() + 1);
endPicker.min(startDate);
}
}
function
kendoEndDateTimePickerChange() {
var
startPicker = $(
'#StartDateTimePicker'
).data(
'kendoDateTimePicker'
),
endDate = $(
'#EndDateTimePicker'
).data(
'kendoDateTimePicker'
).value();
if
(endDate) {
endDate =
new
Date(endDate);
endDate.setDate(endDate.getDate() - 1);
startPicker.max(endDate);
if
(endDate < startPicker.value()) {
startPicker.value(endDate);
}
}
}
And here is where I am calling the reset() function:
$(
'#ResetFilterButton'
).click(
function
() {
$(
'#FilterByInput'
).val(
''
);
resetDateTimePickersToDefaultDateTimeRange();
populateGrid($(
'#StartDateTimePicker'
).val(), $(
'#EndDateTimePicker'
).val(), $(
'#FilterByInput'
).val());
});