77

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.

15 Answers 15

140

Try this:

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

Remove the quotes from 0.

2
  • 4
    @BWDesign Answered a year and a half later than me ;)
    – Russ Cam
    Commented Jul 8, 2013 at 12:28
  • You save me my friend.
    – Smile
    Commented Mar 8, 2014 at 4:14
37

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

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);
1
  • 1
    Thank you. I wasted long time to find this solution and this solved my issue.
    – Rushan
    Commented Jun 12, 2017 at 6:11
26

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

4
  • 1
    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?
    – schickm
    Commented Jun 24, 2012 at 14:53
  • 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
    – Tanvir
    Commented Nov 15, 2013 at 20:07
  • 1
    you are sending an object to the method. a comma on the last value is improper.
    – Brian Noah
    Commented Nov 18, 2013 at 22:43
  • The comma is not needed and will break your code in some browsers (comma removed)
    – iConnor
    Commented Mar 27, 2014 at 6:32
15

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

1
  • 2
    +1: I've used minDate and maxDate to set a valid date interval and it works like a charm. Commented Nov 23, 2009 at 22:18
11

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

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

Live example

read more here

10

This works:

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

//disable future dates

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

//disable past dates

 $('#datetimepicker2').datetimepicker({
        format: 'DD-MM-YYYY',
        minDate: new Date
    });
1
  • 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
    – Sheridan
    Commented Feb 15, 2016 at 16:11
6

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

3

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.

2

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

2
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.

2

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

Try setting startDate to the current date. For example:

$('.date-pick').datePicker({startDate:'01/01/1996'});
1
  • This looks like it is for Kevin Luck's date picker not the standard JQuery one Commented Nov 28, 2011 at 20:19
1

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

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.