如何在剑道月份选择器中禁用前几个月

时间:2016-02-09 13:14:59

标签: kendo-ui telerik kendo-datepicker

我有一个剑道日期选择器,其中只显示了几个月。现在我想禁用当前月份的前几个月禁用,因此用户将无法进入上个月。

2 个答案:

答案 0 :(得分: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>
</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>

如果有任何疑虑,请告诉我。

答案 1 :(得分:-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;
        }
    }
});