Отключить будущие даты в Кендо Угловая DatePicker

Этот вопрос связан с: How to disable past dates without hiding them in Kendo date picker?. Это мой HTML разметка:Отключить будущие даты в Кендо Угловая DatePicker

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

источник

2017-01-09 Ravimallya

Почему вы поставить плюс перед 'нового Date()'? Что именно вы хотите, чтобы щелкнуть будущую дату? – Shai

Когда я нажимаю на будущую дату, ничего не должно быть. – Ravimallya

Это на самом деле намного проще, чем я думал вначале. Вы можете использовать конфигурацию 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>

источник

2017-01-09 10:52:56 Shai

Спасибо. но я тоже могу выбрать будущие даты, где этого не должно быть. Пользователь не должен нажимать. Теперь пользователь может выбрать будущие даты, но календарь не закрывается, что не должно происходить. См. Это http://jsbin.com/jexisesuko/edit?html,css,js,console,output. Датпикер должен будет действовать как jquery ui datepicker ex: http://jsfiddle.net/X82aC/544/. – Ravimallya

Соответствует ли это решение вашим потребностям? – Shai

Нет. Я предупреждал пользователя, проверяя новую дату() и выбранную дату. – Ravimallya

Отключить будущие даты в Кендо Угловая DatePicker

ответ

Смежные вопросы