Kendo UI
jQuery + Kendo UI + MockJax + Knockout
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.blueopal.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<input id="datepicker" style="width:150px;" />
CSS
.disabledDay{
display: block;
overflow: hidden;
min-height: 22px;
line-height: 22px;
padding: 0 .45em 0 .1em;
cursor:default;
opacity: 0.5;
}
JavaScript
$(document).ready(function() {
disabledDaysBefore = [
+new Date("10/20/2014")
];
var p = $("#datepicker").kendoDatePicker({
value: new Date(),
dates: disabledDaysBefore,
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");
});