如何設置當前日期在kendo ui datepicker日期查看日曆

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 ONLY開放的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>