CODEWITHSUNDEEP
javascriptjquerydatepicker
user864600
user864600

Reputation: 423

how to disable dates before today in jQuery datepicker

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

Upvotes: 7

Views: 40683

Answers (6)

Chirag Jain
Chirag Jain

Reputation: 85

You could simply write like this

$('.datepicker').datetimepicker({
      format: 'DD-MM-YYYY',
      minDate: Date()
})

Upvotes: 0

devia
devia

Reputation: 21

simplest solution could....

<script type="text/javascript">$('#date').datepicker({ minDate: 0 });</script>

Upvotes: 2

HassanF
HassanF

Reputation: 455

Instead you can write a function in your .js file like this-

$(function () {

             var date = new Date();
             var currentMonth = date.getMonth();
             var currentDate = date.getDate();
             var currentYear = date.getFullYear();

            if($("#dateToSelect").length > 0){
                $("#dateToSelect").datepicker({
                 maxDate: new Date(currentYear, currentMonth, currentDate)
             });
            }
})

Here "dateToSelect" is the id of the field where the date is shown. The checking of the date length here is not mandatory.

Upvotes: 1

memory of a dream
memory of a dream

Reputation: 1267

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

Upvotes: 2

Mark Biek
Mark Biek

Reputation: 150939

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.

Upvotes: 6

Lobstrosity
Lobstrosity

Reputation: 3936

It doesn't appear to be configurable. At line 1434 of jquery.ui.datepicker.js, if a maxDate is specified, it sets a maxDraw variable and draws up to the month of that date, without regard for any other flags.

But I also agree with zzzzBov. Why would the user need to see values they can't select?

Upvotes: 1

Related Questions