how to disable previous months in kendo month picker

Question

how to disable previous months in kendo month picker

1.8k Views Asked by Richa Goyal At 04 April 2025 at 10:40

I have a kendo date picker in which only months are shown.Now i want to disable previous months of current month to disable so user will not be able to enter previous month.

Original Q&A

There are 2 best solutions below

**Jayesh Goyani** · Answer 1

Please try with the below code snippet.

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

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

Let me know if any concern.

**DoctorMick** · Answer 2

You can use the disableDates property and specify a function to check the date is before the current date, roughly along these lines:

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

how to disable previous months in kendo month picker

There are 2 best solutions below

Related Questions in KENDO-UI

Related Questions in TELERIK

Related Questions in KENDO-DATEPICKER

Trending Questions

Popular # Hahtags

Popular Questions