DATEPICKER

by NunoMira

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.4.5/jquery-ui-timepicker-addon.min.css">
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Select a Date Range</title>
  
</head>
<body>
 
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
 
 
</body>
</html>

CSS

body { 
font-family: verdana; 
font-size: 12px; 
    background : gray;
}

JavaScript

$(function() {
    $( "#from" ).datetimepicker({
      changeMonth: true,  
      changeYear:true, 
      onSelect: function( selectedDate ) {
        $( "#to" ).datetimepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datetimepicker({      
      changeMonth: true,   
      changeYear:true,
      onSelect: function( selectedDate ) {
        $( "#from" ).datetimepicker( "option", "maxDate", selectedDate );
      }
    });
  });