Отключить будущие даты в кендо Angular DatePicker

Этот вопрос относится к: Как отключить прошлые даты, не скрывая их в средстве выбора даты Kendo?, Это моя разметка HTML:

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

И в моем контроллере у меня есть это:

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

и в CSS:

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

Тем не менее, я могу нажать и выбрать любое будущее, даже после удаления href. Как я могу это исправить? Визуализированная разметка будет выглядеть так:

<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>
Источник

1 ответ

На самом деле все гораздо проще, чем я думал сначала. Вы можете использовать disableDates Конфигурация подборщика:

<!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>
Источник
Другие вопросы по тегам