jQuery UI: Date Picker

Date Picker

by John Doe

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">
<input id="tdate" type="text">

<p id="seatsavailable">note:

</p>



<div>

  <input type="submit" name="Submit" value="Submit" id="submit1" />
</div>

CSS

#seatsavailable {
  margin: 30px;
  clear: both;
  font-size: 20px;
}

input {
  margin: 20px;
  clear: both;
	padding:10px;
}

JavaScript

jQuery.noConflict();
jQuery(document).ready(function() {

  jQuery("#tdate").datepicker({
    dateFormat: 'dd-mm-yy',
		showOn: "both",
	  buttonImage: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e9/Google_Calendar.png/128px-Google_Calendar.png",
	  buttonText: "Choose Date", 
	  minDate: 1,
	  maxDate: '+18m',
	  numberOfMonths: 1,
	  showButtonPanel: true
    
  });
	
	
	jQuery('#tdate').on("change", function() {
	    var date= new Date().addDays(1);
			var selected = new Date($(this).val());
			var current = new Date();
      var hour = date.getHours();
      if (hour >= 00) {
        //$(this).datepicker( "option", "minDate", "+2" );
        jQuery("#seatsavailable").html("problem alert !!");
        jQuery("#submit1").hide();
      }
	 });	
		
		

}); // end docready