2016-09-28 168 views
0

我正在与kendo UI。我不得不编写小代码片段来执行某些任务,例如,我有两个kendo Date Picker其中假设我选择了第一个日期选择器日期,并且当我点击第二个日期选择器时,如何选择set calendar view highlight date (default it is current date)日期在第一。如何设置当前日期在kendo ui datepicker日期查看日历

代码如下所示:

 $(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

+0

你检查答案取? – Dekel

回答

0

这里有两个例子:

  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>

相关问题