JSFiddle - React, Tailwind, and code Playground

by vivekchidura

HTML

<div>          
  
  <label for="from">From</label>  
  <input type="text" id="from" name="from">  
  <label for="to">to</label>  
  <input type="text" id="to" name="to">  
    
  <input type="submit" name="go" value="Go">  
   
    
  </div>

CSS

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css">

JavaScript

<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script> 

<script>  
 $(function() {  
 $( "#from" ).datepicker({  
  defaultDate: "+1d",  
  changeMonth: true,  
  changeYear: true,  
  numberOfMonths: 1,  
  onSelect: function( selectedDate ) {  
   $( "#to" ).datepicker( "option", "minDate", selectedDate );  
  }  
 });  
 //***  
 var currentDate = new Date();  
       $("#from").datepicker("setDate",currentDate);  
   
 $("#from").datepicker("option",{  
           dateFormat: 'mm/dd/yy',  
           showOn: "button",  
           
       });  
   
   
 $( "#to" ).datepicker({  
  defaultDate: "+1d",  
  changeMonth: true,  
  changeYear: true,  
  numberOfMonths: 1,  
  onSelect: function( selectedDate ) {  
   $( "#from" ).datepicker( "option", "maxDate", selectedDate );  
  }  
 });  
 //***  
  var currentDate = new Date();  
       $("#to").datepicker("setDate",currentDate);  
   
 $("#to").datepicker("option",{  
           dateFormat: 'mm/dd/yy',  
           showOn: "button",  
         // whatever option Or event you want   
       });  
   
   
});  
</script>