CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4telerikkendo-ui
Jayaraj
Jayaraj

Reputation: 696

Kendo UI datepicker does not clear previous min and max date

I am working in an MVC4 razor application with kendo UI. In my project, we have used two kendo datepicker controls to display from and to date in a page. When the user chooses a date from the "ApplicationDateFrom" picker, then we set min value of the "ApplicationDateTo" is the date of the "ApplicationDateFrom" picker. If the user chooses a value from the "ApplicationDateTo" picker, we set max value of the "ApplicationDateFrom" picker is the value of the "ApplicationDateTo" picker.

My issue is that, when the user clear the values from "ApplicationDateFrom" and "ApplicationDateTo" date picker textbox fields attched with the calender, after selecting values from "ApplicationDateFrom" and "ApplicationDateTo" calender, both "ApplicationDateFrom" and "ApplicationDateTo" calender displays with previously set min and max values.

Here is the code

@(Html.Kendo().DatePickerFor(o => o.ApplicationDateFrom)
.Events(e=>e.Change("onApplicationFromDateChange"))
.HtmlAttributes(new { type = "text", placeholder = "MM/DD/YYYY", @class="span6" }))

@(Html.Kendo().DatePickerFor(o => o.ApplicationDateTo)
.Events(e=>e.Change("onApplicationToDateChange"))
.HtmlAttributes(new { type = "text", placeholder = "MM/DD/YYYY", @class="span6" }))

<script>
function onApplicationFromDateChange() {
var endPicker = $("#ApplicationDateTo").data("kendoDatePicker"), startDate = this.value();
if (startDate) {
        startDate = new Date(startDate);
        startDate.setDate(startDate.getDate());
        endPicker.min(startDate);
    }
}       

function onApplicationToDateChange() {
var startPicker = $("#ApplicationDateFrom").data("kendoDatePicker"), endDate = this.value();
if (endDate) {
        endDate = new Date(endDate);
        endDate.setDate(endDate.getDate());
        startPicker.max(endDate);
    }
}</script>

Please provide a solution. Any help is appreciated.

Upvotes: 1

Views: 7886

Answers (1)

Bishnu Rawal
Bishnu Rawal

Reputation: 1387

If user clears the textbox and focuses it out, then Change event is fired parsing the date string. You can manage something like:

<script>
function onApplicationFromDateChange() {
var endPicker = $("#ApplicationDateTo").data("kendoDatePicker"), startDate = this.value();
if (startDate) {
        startDate = new Date(startDate);
        startDate.setDate(startDate.getDate());
        endPicker.min(startDate);
    }
else if(!endPicker.value()){   // You said both
   endPicker.min(new Date(1900, 0, 1)); // Setting defaults
   endPicker.max(new Date(2099, 11, 31));
   this.min(new Date(1900, 0, 1));
   this.max(new Date(2099, 11, 31));
}
}       

function onApplicationToDateChange() {
var startPicker = $("#ApplicationDateFrom").data("kendoDatePicker"), endDate = this.value();
if (endDate) {
        endDate = new Date(endDate);
        endDate.setDate(endDate.getDate());
        startPicker.max(endDate);
    }
else if(!startPicker.value()){
       startPicker.min(new Date(1900, 0, 1)); // Setting defaults
       startPicker.max(new Date(2099, 11, 31));
       this.min(new Date(1900, 0, 1));
       this.max(new Date(2099, 11, 31));
}
}</script>

Its bit ugly. I would rather use external element(viz. button) to reset the min/max values.

Upvotes: 3

Related Questions