如何禁用前幾個月在劍道月選擇器

我有一個劍道日期選擇器，其中只顯示幾個月。現在我想禁用當前月份的前幾個月禁用，所以用戶將無法進入前一個月。如何禁用前幾個月在劍道月選擇器

2016-02-09 Richa Goyal

請嘗試使用下面的代碼片段。

<!DOCTYPE html> 
<html> 
<head> 
    <title>Jayesh Goyani</title> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script> 
</head> 
<body> 

    <div id="date"></div> 

    <script> 
     $(document).ready(function() { 
      var myDatePicker = $("#date").kendoDatePicker().data("kendoDatePicker"); 
      myDatePicker.min(new Date()); //This code line will hide previous date from date picker 
     }); 
    </script> 
</body> 
</html>

更新1：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Jayesh Goyani</title> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script> 
    <style> 
     .disabledDay { 
      display: block; 
      overflow: hidden; 
      min-height: 22px; 
      line-height: 22px; 
      padding: 0 .45em 0 .1em; 
      cursor: default; 
      opacity: 0.5; 
     } 
    </style> 
</head> 
<body> 

    <input id="datepicker" style="width: 150px;" /> 

    <script> 
     disabledDaysBefore = [ 
      +new Date("10/20/2015") 
     ]; 

     $(document).ready(function() { 


      var p = $("#datepicker").kendoDatePicker({ 
       value: new Date(), 
       dates: disabledDaysBefore, 
       change: onChange, 
       month: { 
        content: '# if (data.date < data.dates) { #' + 
        '<div class="disabledDay">#= data.value #</div>' + 
        '# } else { #' + 
        '#= data.value #' + 
        '# } #' 
       }, 

       open: function (e) { 
        $(".disabledDay").parent().removeClass("k-link") 
        $(".disabledDay").parent().removeAttr("href") 
       }, 
      }).data("kendoDatePicker"); 
     }); 
     function onChange() { 
      var tillDate = new Date(disabledDaysBefore[0]); 
      var selectedDate = new Date(kendo.toString(this.value(), 'd')); 

      if (tillDate > selectedDate) { 
       tillDate = tillDate + parseInt(1); 
       $("#datepicker").data("kendoDatePicker").value(tillDate); 
      } 
     } 
    </script> 
</body> 
</html>

讓我知道如果任何問題。

來源

2016-02-09 13:22:55

我不想上月從calendar.I隱藏只想禁用它。 –

我已根據要求更新了我的上述帖子。 –

disabledDay類沒有申請..我仍然可以選擇上個月，但在選擇沒有日期顯示在那裏。 –

-1

可以使用disableDates屬性，並指定一個函數來檢查日期是在當前日期之前，大致沿着這些線路：

$("#monthpicker").kendoDatePicker({ 
    start: "year", 
    depth: "year", 
    format: "MMMM yyyy", 

    disableDates: function (date) { 
     var currentDate = new Date(); 
     if (date.getFullYear() <= currentDate.getFullYear() && date.getMonth() < currentDate.getMonth()) { 
      return true; 
     } else { 
      return false; 
     } 
    } 
});

來源

2016-02-09 13:23:42 DoctorMick

Thnx ...但我不知道前一個月的邏輯。 –

嘗試更新的答案，應該可以工作。 – DoctorMick

如何禁用前幾個月在劍道月選擇器

回答

相關問題