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);
                    }
                  }
                });
            });

我想在dateview
中突出显示sessionDate

Answer 1

以下是两个例子：

在更改datepicker1
仅在打开datepicker3

这两个值均来自datepicker1

＆＃13;

$(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)
    }
  });
});

＆＃13;

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

＆＃13;

如何在kendo ui datepicker日期视图日历中设置当前日期

1 个答案: