1

我有一个剑道日期选择器，其中只显示月份。现在我想禁用当前月份的前几个月来禁用，这样用户将无法输入上个月。

4

2 回答 2

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>

让我知道是否有任何问题。

于 2016-02-09T13:22:55.817 回答
-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-09T13:23:42.353 回答