Jquery date picker

jQuery is very powerful library in javascript. javascript giving lots of functionality. Here is a date functionality with validation. Here is example of jQuery date picker. Two date picker one is have id from and second is have id to.

In this example we set min date of second calendar from first calendar, and max date of first calendar from second calendar. When you select date from first calendar min date automatically set of second calendar as well as when you select date from second calendar max date automatically set in first calendar.

CSS and js file for include

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Html code :-

From <input type="text" id="first" placeholder="Start Date"/>
to <input type="text" id="second" placeholder="End Date"/>

Javascript code :-

 $( "#first" ).datepicker({
  changeMonth: true, 
  changeYear:true,
  maxDate:0,
  dateFormat: 'yy-mm-dd',
  onSelect: function( selectedDate ) {
   $( "#second" ).datepicker( "option", "minDate", selectedDate );
  }
 });
 $( "#second" ).datepicker({
  changeMonth: true,
  changeYear:true,
  maxDate:0,
  dateFormat: 'yy-mm-dd',
  onSelect: function( selectedDate ) {
   $( "#first" ).datepicker( "option", "maxDate", selectedDate );
  }
 });