jQuery datepicker to prevent past date

javascript jquery jquery-ui date datepicker

159,730

Solution 1

Try this:

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

Remove the quotes from 0.

Solution 2

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 });
});

Solution 3

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);

Solution 4

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' />

Solution 5

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

View more solutions

159,730

netrox

Updated on July 05, 2022

Comments

netrox almost 2 years
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.
Jim Ferrans over 14 years

+1: I've used minDate and maxDate to set a valid date interval and it works like a charm.
salonMonsters over 12 years

This looks like it is for Kevin Luck's date picker not the standard JQuery one
schickm almost 12 years

Any explanation as to why comma is needed? I can remove it and everything still functions properly. Is there some browser that requires a comma for a single property object?
Russ Cam almost 11 years

@BWDesign Answered a year and a half later than me ;)
Tanvir over 10 years

You only need commas if you're using multiple options, e.g. $('#datepicker').datepicker({ minDate: 0, maxDate: "+1M +10D", dateFormat: 'yy-mm-dd' }); You don't need a comma after the last option
Brian Noah over 10 years

you are sending an object to the method. a comma on the last value is improper.
NullPointer about 10 years

You save me my friend.
iConnor about 10 years

The comma is not needed and will break your code in some browsers (comma removed)
Sheridan over 8 years

I'm not sure why this answer got a down vote, because its solution worked for me, whereas the accepted solution using a 0 caused a JavaScript error. +1
Rushan almost 7 years

Thank you. I wasted long time to find this solution and this solved my issue.