JSFiddle - React, Tailwind, and code Playground

by Thomas Jackson

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="01/01/0001" style="width:150px;" /> <br />
<input type="button" value="Validate" id="btnValidate" />

<script src="http://momentjs.com/downloads/moment.js"></script>

JavaScript

$(document).ready(function () {
     // create DatePicker from input HTML element
     $("#datepicker").kendoDatePicker();
     
     $('#btnValidate').click(function(){
         var minDate = moment('1900-1-1');
         var maxDate = moment(Date.parse(new Date()));

         //var dateField = $("#datepicker").data("kendoDatePicker").value();
         var dateField = $("#datepicker").val();
         
         // Moment requires YYYY-MM-DD
         dateField = dateField.replace('/','-').replace('/','-');
         var year = dateField.split('-')[2];
         var month = dateField.split('-')[0];
         var day = dateField.split('-')[1];

         if (month < 10 && month.toString().length == 1) { month = "0" + month; }
         if (day < 10 && day.toString().length == 1) { day = "0" + day; }
        
         // For 2-digit years -- you could also use this to return 'invalid'
         if (year <= 99 && year.toString().length < 3)
         {
             // Get some data
             var today = new Date();
             var currentYear = today.getFullYear();
             var millenium = (currentYear / 100);
             var century = millenium.toString().split('.')[0];
             var currentTwoDigitYear = millenium.toString().split('.')[1];
             
             // If year entered > current year, set to preceeding century
             // Otherwise, keep the century
             if (year > currentTwoDigitYear) {
                 var newCentury = century - 1;
                 year = newCentury + year;
             } else { // year <= currentTwoDigitYear
                 year = century + year.toString();
             }             
         }        
         //alert(year);
         dateField = year + '-' + month + '-' + day;
         //alert(dateField); 
         
         // Enter into moment and compare
         var dateToConsider = moment(dateField);
         var lowerLimitBreached = dateToConsider.diff(minDate) < 0;
         var upperBoundBreached =...