how to disable dates before today in jQuery datepicker

Question

How do I disable dates before today in jQuery datepicker WITHOUT using minDate: 0?

I would like to enable navigation of the calendar as per usual before today while making sure that user do NOT pick dates before today.

(i.e. say today's date is 11Aug11 and I would like all the dates before this disabled but still enabling user to go to previous months, years, etc.)

Answer 1

While I agree that it's weird behavior, you might be able to fake it using the onSelect event of the datepicker.

$(document).ready(function() {
    $('#Date').datepicker({
        onSelect: function(dateText, inst) {
            //Get today's date at midnight
            var today = new Date();
            today = Date.parse(today.getMonth()+1+'/'+today.getDate()+'/'+today.getFullYear());
            //Get the selected date (also at midnight)
            var selDate = Date.parse(dateText);

            if(selDate < today) {
                //If the selected date was before today, continue to show the datepicker
                $('#Date').val('');
                $(inst).datepicker('show');
            }
        }
    });
});

Basically, you handle the onSelect event.

When a date is selected, check to see if it's before today's date.

If it is, then you immediately show the datepicker again and clear out the input box attached to it.

---

Updated Code sample is now completely functional. Here's a jsfiddle to demonstrate.

Answer 2

Hope this is still helpful to someone. My solution is to place checks on individual dates like this:

$("#StartDate").datepicker({ dateFormat: 'yy-mm-dd',  beforeShowDay: NotBeforeToday});



function NotBeforeToday(date)
{
    var now = new Date();//this gets the current date and time
    if (date.getFullYear() == now.getFullYear() && date.getMonth() == now.getMonth() && date.getDate() > now.getDate())
        return [true];
    if (date.getFullYear() >= now.getFullYear() && date.getMonth() > now.getMonth())
       return [true];
     if (date.getFullYear() > now.getFullYear())
       return [true];
    return [false];
}

I find it simple and elegant