Validate Custom Dates in the DateTimePicker
Environment
| Product | Progress® Kendo UI® DateTimePicker for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I create custom date validation in the Kendo UI for jQuery DateTimePicker?
Solution
The following example demonstrates how to achieve the desired scenario.
<div id="example">
<div id="to-do">
<input id="datetimepicker" name="datetimepicker" style="width:200px;" required />
<span class="k-invalid-msg" data-for="datetimepicker"></span>
</div>
<script>
$(document).ready(function () {
// Create DateTimePicker from the input HTML element.
$("#datetimepicker").kendoDateTimePicker({
value:new Date(),
parseFormats: ["MM/dd/yyyy"]
});
var validator = $("#example").kendoValidator({
rules: {
datepicker: function(input) {
if (input.is("[data-role=datetimepicker]")) {
return input.data("kendoDateTimePicker").value();
} else {
return true;
}
}
},
messages: {
datepicker: "Please enter valid date!"
}
}).data("kendoValidator");
});
</script>
<style scoped>
#to-do {
height: 52px;
width: 221px;
background: url('../content/web/datepicker/todo.png') transparent no-repeat 0 0;
}
</style>
</div>