Disable Future Dates in Kendo Angular DatePicker

Question

Disable Future Dates in Kendo Angular DatePicker

6k views Asked by Ravimallya At 09 September 2024 at 20:12

This question is related to: How to disable past dates without hiding them in Kendo date picker? . This is my HTML markup:

 <input kendo-date-picker id="datepicker" ng-model="dateString" k-options="dateOptions" k-ng-model="dateObject"
               style="width: 100%;" />

And in my Controller I've this:

var disabledDaysAfter = [
      +new Date()
];
$scope.dateOptions = {
    dates: disabledDaysAfter,
    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")
    }
};

and in CSS:

.disabledDay {
    display: block;
    overflow: hidden;
    min-height: 22px;
    line-height: 22px;
    padding: 0 .45em 0 .1em;
    cursor: default;
    color: #999;
}

However, I can click and select any future even after href removed. How can I fix it? The rendered markup will be like this:

<td class="k-state-focused" id="02dd61ed-b4f2-494f-8238-e76da5b51346_cell_selected" role="gridcell" aria-selected="true" aria-label="Current focused date is Thursday, January 12, 2017">
    <a tabindex="-1" title="Thursday, January 12, 2017" data-value="2017/0/12">
        <div class="disabledDay">12</div>
    </a>
</td>

Original Q&A

There are 1 answers

**Shai** · Answer 1 · 2017-01-09 10:52:56

It's actually much simpler than I thought at first. You can use the disableDates configuration of the picker:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>

<input id="datetimepicker" />
<script>
$("#datetimepicker").kendoDatePicker({
    value: new Date(),
    disableDates: function (date) {
        return date > new Date();
    }
});
</script>
</body>
</html>

TechQA.

Disable Future Dates in Kendo Angular DatePicker

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in ANGULARJS

Related Questions in KENDO-UI

Related Questions in KENDO-DATEPICKER

Popular Questions

Popular Tags

Trending Questions