[javascript] 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.

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

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

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

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

Live example

read more here

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

Try setting startDate to the current date. For example:

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

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

This works:

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

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

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

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.

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.

Remove the quotes surrounding 0 and it will work.

Working Code Snippet:

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

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

<!-- load jQuery and jQuery UI -->_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>_x000D_
_x000D_
<!-- load jQuery UI CSS theme -->_x000D_
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">_x000D_
_x000D_
<!-- the datepicker input -->_x000D_
<input type='text' id='datepicker' placeholder='Select date' />

Try this:

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

Remove the quotes from 0.