Knockout-Kendo with validation

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.debug.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<script src="https://rawgit.com/ericmbarnard/Knockout-Validation/master/Dist/knockout.validation.js"></script>
<input data-bind="kendoDatePicker: startDate" />
<span class="validationMessage" data-bind="validationMessage: startDate"></span>

CSS

input { width: 50px; }
label { display: block; }
.validationMessage { color: Red; }
.customMessage { color: Orange; }

JavaScript

ko.validation.configure({
    registerExtenders: true,
    messagesOnModified: true,
    insertMessages: true,
    parseInputAttributes: true,
    messageTemplate: null
});

var ViewModel = function() {
    this.startDate = ko.observable(new Date()).extend({ required: true });
};

ko.applyBindings(new ViewModel());