jQuery datepicker to prevent past date

How do I disable past dates on jQuery datepicker? I looked for options but don't seem to find anything that indicates the ability to disable past dates.

UPDATE: Thanks yall for the quick response. I tried that with no luck. Days were still not grayed out as I expected and still accept the selected past date.

I tried this:

$('#datepicker').datepicker({ minDate: '0' });

Doesn't work.

I tried this:

$('#datepicker').datepicker({ minDate: new Date() });

Still doesn't work either.

It displays the calendar widget just fine. It just won't gray out or prevent input of past days. I've attempted the minDate and maxDate in the past with no luck so I figured it must not be them.

Try this:

$("#datepicker").datepicker({ minDate: 0 });

Remove the quotes from 0.

You just need to specify a minimum date - setting it to 0 means that the minimum date is 0 days from today i.e. today. You could pass the string '0d' instead (the default unit is days).

$(function () {
    $('#date').datepicker({ minDate: 0 });
});

If you are dealing with a previously bound date picker then setting

$("#datepicker").datepicker({ minDate: 0 });

will not work. That syntax is applicable only when you are creating the widget.

To set min date for a bound date picker use the following:

$("#datePicker").datepicker("option", "minDate", 0);

Remove the quotes surrounding 0 and it will work.

Working Code Snippet:

// set minDate to 0 for today's date
$('#datepicker').datepicker({ minDate: 0 });

body {
    font-size: 12px; /* just so that it doesn't default to 16px (which is kinda huge) */
}

<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">

<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />

Use the minDate option to set the minimum possible date. http://jqueryui.com/demos/datepicker/#option-minDate

Give zero to mindate and it'll disabale past dates.

$( "#datepicker" ).datepicker({ minDate: 0});

Live example

read more here

This works:

$("#datepicker").datepicker({ minDate: +0 });

//disable future dates

$('#datetimepicker1').datetimepicker({
            format: 'DD-MM-YYYY',
            maxDate: new Date
        }); 

//disable past dates

 $('#datetimepicker2').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: new Date
    });

$("#datePicker").datePicker({startDate: new Date() });. This works for me

I am using following code to format date and show 2 months in calendar...

<script>
$(function() {

	var dates = $( "#from, #to" ).datepicker({
											 
		showOn: "button",
		buttonImage: "imgs/calendar-month.png",
		buttonImageOnly: true,							 
		defaultDate: "+1w",
		changeMonth: true,
		numberOfMonths: 2,
		
		onSelect: function( selectedDate ) {

			
		
			
			$( ".selector" ).datepicker({ defaultDate: +7 });
			var option = this.id == "from" ? "minDate" : "maxDate",
			
		
				instance = $( this ).data( "datepicker" ),
				date = $.datepicker.parseDate(
					instance.settings.dateFormat ||
					$.datepicker._defaults.dateFormat,
					selectedDate, instance.settings );
		
			dates.not( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );
		
			
		}
	});
});

</script>

The problem is I am not sure how to restrict previous dates selection.

Make sure you put multiple properties in the same line (since you only showed 1 line of code, you may have had the same problem I did).

Mine would set the default date, but didn't gray out old dates. This doesn't work:

$('#date_end').datepicker({ defaultDate: +31 })
$('#date_end').datepicker({ minDate: 1 })

This does both:

$('#date_end').datepicker({ defaultDate: +31, minDate: 1 })

1 and +1 work the same (or 0 and +0 in your case).

Me: Windows 7 x64, Rails 3.2.3, Ruby 1.9.3

var givenStartDate = $('#startDate').val();
		alert('START DATE'+givenStartDate);
		var givenEndDate = $('#endDate').val();
		alert('END DATE'+givenEndDate);
		var date = new Date();
		var month = date.getMonth()+1;
		var day = date.getDate();
		var currentDate = date.getFullYear() + '-' +
		    (month<10 ? '0' : '') + month + '-' +
		    (day<10 ? '0' : '') + day;
		if(givenStartDate < currentDate || givenEndDate < currentDate)
		 { 
		$("#updateButton").attr("disabled","disabled"); 
  		 }
		 if(givenStartDate < currentDate && givenEndDate > currentDate)
			{
			$("#updateButton").attr("enabled","enabled");
			}
		 if(givenStartDate > currentDate || givenEndDate > currentDate)	{ 
		$("#updateButton").attr("enabled","enabled"); 
 		 }

Try this. If any mistake, please correct me :) Thanks all.

This should work <input type="text" id="datepicker">

var dateToday = new Date();
$("#datepicker").datepicker({
    minDate: dateToday,
    onSelect: function(selectedDate) {
    var option = this.id == "datepicker" ? "minDate" : "maxDate",
    instance = $(this).data("datepicker"),
    date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
    dates.not(this).datepicker("option", option, date);
    }
});

Try setting startDate to the current date. For example:

$('.date-pick').datePicker({startDate:'01/01/1996'});

I used the min attribute: min="' + (new Date()).toISOString().substring(0,10) + '"

Here's my code and it worked.

<input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>