如何设置当前日期在剑道ui日期拾取器日期视图日历

How to set current date in kendo ui datepicker date view calender

本文关键字：日期 ui 日历 视图 何设置 设置 当前日期      更新时间：2023-09-26

我正在使用剑道UI。我不得不编写小代码片段来执行某些任务，例如，我有两个剑道日期选择器，其中假设我选择了第一个日期选择器日期，当我单击第二个日期选择器时，如何在第一个选择日期的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

下面是两个例子:

  1. 根据datepicker1的变化设置datepicker2的日期
  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>

相关文章：