Disable Future Dates in Kendo Angular DatePicker

Question

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>

Why did you put a plus before `new Date()`? What exactly do you want to happen when a future date is clicked? — Shai, Jan 09 '17 at 10:11

Shai · Answer 1 · 2017-01-09T12:09:38.660

3

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>

edited Jan 09 '17 at 12:09

answered Jan 09 '17 at 10:52

Shai

3,659
2
13
26

Thank you. but I can really select the future dates as well, where it shouldn't be happen. User shouldn't be allowed to click. Now, user can select future dates, but the calendar is not closing which should not happen. See this http://jsbin.com/jexisesuko/edit?html,css,js,console,output . The datepicker would need to act like jquery ui datepicker ex: http://jsfiddle.net/X82aC/544/ . – Ravimallya Jan 09 '17 at 11:27
Does this solution suit your needs? – Shai Jan 18 '17 at 13:58
No. I'd used to alert the user by checking new Date() and the selected date. – Ravimallya Jan 19 '17 at 06:40
1

@RahulNikate, Happy to have helped! Ravimallya, Why didn't this solution work or you? – Shai Sep 06 '17 at 11:02
@Shai I think I have had sorted this out. However, I can't remember the solution and I no longer allowed to access the source code of the project that I was worked. – Ravimallya Sep 06 '17 at 11:40

Disable Future Dates in Kendo Angular DatePicker

1 Answers1