JSFiddle - React, Tailwind, and code Playground

by chiragvidani

HTML

<script src="http://demos.telerik.com/kendo-ui/datepicker/index"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.528/styles/kendo.dataviz.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>
<input id="datepicker" value="10/10/2011" style="width:150px;" /> <br />
<input type="button" value="Validate" id="btnValidate" />

JavaScript

$(document).ready(function () {
     // create DatePicker from input HTML element
     $("#datepicker").kendoDatePicker();
     
     $('#btnValidate').click(function(){
         var minDate = new Date(1900,0,1);
         var maxDate = new Date();
         var selectedDate = $("#datepicker").data("kendoDatePicker").value();
//         alert(minDate);
//         alert(maxDate);
//         alert(selectedDate);
         
         if((selectedDate < minDate) || (selectedDate > maxDate))
             alert('Invalid date');
         else
             alert('Valid date');
     });
 });