CODEWITHSUNDEEP
javascriptjquerykendo-ui
user3797088
user3797088

Reputation: 563

Kendo Date Picker Max Date

I have a problem, I want my kendo Datepicker's max to be plus 3 days from the selected start date. I seem to be stuck. Here is my code

$(document).ready(function(){
$("#txtFromDate").datepicker({
    minDate: "D", 
    numberOfMonths: 1,
    onSelect: function(selected) {
      $("#txtToDate").datepicker("option","minDate", selected)
      $(".selector").datepicker("option", "dateFormat", "yy-mm-dd")
    }
});
$("#txtToDate").datepicker({
    maxDate:"+3#txtFromDate",
    numberOfMonths: 1,
    onSelect: function(selected) {
       $("#txtFromDate").datepicker("option","maxDate", selected)
       $(".selector").datepicker("option", "dateFormat", "yy-mm-dd")
    }
});  
});

Any help will be nice!

Upvotes: 1

Views: 1956

Answers (1)

Harsh
Harsh

Reputation: 1072

Try this http://dojo.telerik.com/@harsh/eHefe

Html:

<input id="startDate" style="width:150px;" />
<input id="endDate" style="width:150px;"/>

Js:

var gap = 3; //3 days
  $("#startDate").kendoDatePicker({
      min: new Date(),
      format: "dd/MM/yyyy",
      change: function (e) {
          var start_date = new Date(this.value());

          var max_date = new Date(start_date.getTime() + gap * 86400000);
          $('#endDate').data('kendoDatePicker').min(start_date);
          $('#endDate').data('kendoDatePicker').max(max_date);

          $('#endDate').val('');
      }
  });

  $("#endDate").kendoDatePicker({
      format: "dd/MM/yyyy"
  });

$("#startDate").attr('readonly','true'); 
$("#endDate").attr('readonly','true');

Upvotes: 1

Related Questions