JQuery datepicker to prevent past date

Question

How to disable past dates in jQuery datepicker? I was looking for options, but it seems I did not find anything that indicates the possibility of disabling past dates.

UPDATE: Thanks for the quick reply. I tried it with no luck. The days were still not grayed out as I expected, and still accept the selected past date.

I tried this:

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

Does not work.

I tried this:

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

Still not working.

It displays a calendar widget just fine. It simply will not be gray-haired or prevent the entry of past days. I tried to use minDate and maxDate in the past, and I had no luck, so I decided that it wasn’t them.

Answer 1

Try the following:

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

Remove quotes from 0 .

Answer 2

You just need to specify the minimum date - setting it to 0 means that the minimum date is 0 days from today, that is today. Instead, you can pass the string '0d' (the default unit is days).

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

Answer 3

Remove the quotes surrounding 0 , and it will work.

Snippet of working code:

 // set minDate to 0 for today 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' /> 

Answer 4

If you are dealing with a previously related date selection, then set

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

will not work. This syntax is only applicable when creating a widget.

To set a minimum date for related date pickers, use the following:

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

Answer 5

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

Answer 6

Give zero to talk and it will turn off past dates.

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

Living example

more details here

Answer 7

It works:

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

Answer 8

// disable future dates

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

// disable past dates

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

Answer 9

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

Answer 10

I use the following code to format the date and show 2 months on the 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 that I'm not sure how to limit the selection of previous dates.

Answer 11

Make sure you put multiple properties on the same line (since you specified only one line of code, you might have the same problem).

Mine set the default date, but did not go down from the old dates. This does not work:

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

This does the following:

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

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

Me: Windows 7 x64, Rails 3.2.3, Ruby 1.9.3

Answer 12

 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 it. If there is any mistake, please correct me :) Thanks to everyone.

Answer 13

Try setting startDate to the current date. For example:

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

Answer 14

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

Here is my code and it worked.

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