Как установить текущую дату в kendo ui datepicker date view calender

Question

Я работаю с kendo UI. Мне пришлось написать небольшие фрагменты кода для выполнения определенных задач, например, у меня есть два kendo Date Picker, в которых предположим, что у меня есть первая дата выбора даты, и когда я нажимаю на второй выбор даты, как set calendar view highlight date (default it is current date), который был выбран ранее сначала укажите дату.

код, как показано ниже:

 $(document).ready(function() {    
      var sessionDate=new Date(); 
       $("#datepickerFrom").kendoDatePicker({     
        change:function() { 
        if(this.value()!=null) 
        { 
         sessionDate=this.value(); 
        } 

        } 
       }); 
       $("#datepickerTo").kendoDatePicker({ 
        open: function() { 
        if(this.value()==null) 
        {          
         var calendar = this.dateView.calendar; 
         calendar.current(sessionDate); 
        } 
        } 
       }); 
      }); 

Я хочу, чтобы выделить SESSIONDATE в dateview

Answer 1

Вот два примера:

1. Установите дату DATEPICKER2 об изменении datepicker1
2. Укажите дату datepicker3 ТОЛЬКО на открытых из datepicker3

Оба значения взяты из DATEPICKER1

$(document).ready(function() { 
 
    var sessionDate; 
 
    // create DatePicker from input HTML element 
 
    $("#datepicker1").kendoDatePicker({ 
 
    change: function() { 
 
     sessionDate = this.value() 
 
     $("#datepicker2").data("kendoDatePicker").value(sessionDate); 
 
    } 
 
    }); 
 
    $("#datepicker2").kendoDatePicker(); 
 
    $("#datepicker3").kendoDatePicker({ 
 
    open: function() { 
 
     this.value(sessionDate) 
 
    } 
 
    }); 
 
});

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style> 
 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.common-material.min.css" /> 
 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.min.css" /> 
 
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.3.914/styles/kendo.material.mobile.min.css" /> 
 

 
<script src="//kendo.cdn.telerik.com/2016.3.914/js/jquery.min.js"></script> 
 
<script src="//kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script> 
 
<div id="example"> 
 
    <div class="demo-section k-content"> 
 

 
    <h4>Datepicker 1:</h4> 
 
    <input id="datepicker1" value="10/10/2011" style="width: 100%" /> 
 

 
    <h4>Datepicker 2 (set value on change of datepicker1):</h4> 
 
    <input id="datepicker2" value="10/10/2011" style="width: 100%" /> 
 

 
    <h4>Datepicker 3 (set value on open):</h4> 
 
    <input id="datepicker3" value="10/10/2011" style="width: 100%" /> 
 
    </div> 
 
    <script> 
 
    </script> 
 
</div>