jQuery datepicker to prevent past date

Question

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.

DarthJDG · Accepted Answer · 2011-06-27 11:57:18Z

140

Try this:

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

Remove the quotes from 0.

edited Jun 27, 2011 at 11:57

DarthJDG

16.6k11 gold badges52 silver badges56 bronze badges

answered Jun 27, 2011 at 9:13

Khawar

1,4091 gold badge9 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Russ Cam Over a year ago

@BWDesign Answered a year and a half later than me ;)

Smile Over a year ago

You save me my friend.

Russ Cam · Accepted Answer · 2009-11-24 00:01:36Z

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

answered Nov 24, 2009 at 0:01

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Comments

Zephyr · Accepted Answer · 2012-09-07 21:03:04Z

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

answered Sep 7, 2012 at 21:03

Zephyr

7,8634 gold badges40 silver badges42 bronze badges

1 Comment

Rushan Over a year ago

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

Rahul Desai · Accepted Answer · 2016-05-17 13:42:47Z

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

edited May 17, 2016 at 13:42

answered Apr 11, 2012 at 16:58

Rahul Desai

15.5k20 gold badges89 silver badges146 bronze badges

4 Comments

schickm Over a year ago

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?

Tanvir Over a year ago

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 a year ago

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

iConnor Over a year ago

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

Bill · Accepted Answer · 2009-11-23 22:15:10Z

15

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

answered Nov 23, 2009 at 22:15

Bill

2,6411 gold badge27 silver badges41 bronze badges

1 Comment

Jim Ferrans Over a year ago

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

Sonu Sindhu · Accepted Answer · 2013-07-04 06:37:02Z

11

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

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

Live example

Comments

Tim Stone · Accepted Answer · 2011-07-16 22:45:40Z

10

This works:

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

edited Jul 16, 2011 at 22:45

Tim Stone

19.2k6 gold badges58 silver badges66 bronze badges

answered Jul 16, 2011 at 22:10

Anwasha Dhar

1011 silver badge2 bronze badges

Comments

Dev · Accepted Answer · 2015-12-10 12:06:36Z

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

edited Dec 10, 2015 at 12:06

Dev

13.8k24 gold badges90 silver badges189 bronze badges

answered Dec 10, 2015 at 11:31

Anto

1111 silver badge2 bronze badges

1 Comment

Sheridan Over a year ago

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

Akhil Yadav · Accepted Answer · 2016-07-07 10:34:54Z

6

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

answered Jul 7, 2016 at 10:34

Akhil Yadav

971 silver badge11 bronze badges

Comments

animuson · Accepted Answer · 2011-11-24 00:56:07Z

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.

Ed Birm · Accepted Answer · 2012-05-05 23:55:40Z

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

answered May 5, 2012 at 23:55

Ed Birm

6576 silver badges6 bronze badges

Comments

MeowRude · Accepted Answer · 2013-07-04 06:28:17Z

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.

Wise_Bake_ · Accepted Answer · 2020-05-08 01:24:05Z

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

answered May 8, 2020 at 1:24

Wise_Bake_

213 bronze badges

Comments

Tim Stone · Accepted Answer · 2011-07-16 22:46:15Z

1

Try setting startDate to the current date. For example:

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

edited Jul 16, 2011 at 22:46

Tim Stone

19.2k6 gold badges58 silver badges66 bronze badges

answered Nov 24, 2009 at 1:08

user217467

1 Comment

salonMonsters Over a year ago

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

mbigras · Accepted Answer · 2017-03-04 05:04:11Z

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

edited Mar 4, 2017 at 5:04

mbigras

8,10513 gold badges65 silver badges118 bronze badges

answered Mar 4, 2017 at 0:41

Louis HM

211 bronze badge

Collectives™ on Stack Overflow

jQuery datepicker to prevent past date

15 Answers 15

2 Comments

Comments

1 Comment

4 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

2 Comments

Comments

1 Comment

4 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related