CODEWITHSUNDEEP
jquerydatepicker
fatherazrael
fatherazrael

Reputation: 5957

How to Datepicker picks future dates only and disable past date in JQuery and CSS?

Which class should be used for datepicker to use future dates only?

<form:input path="FutureDato" type="date" class="datepicker maxDateToday hasDatepicker" />

Note: The code is written by someone else. The above code does not allow to enter future date or you can say disable future dates on calendar click. I want code to disable past dates and show future date years only. I am unable to get how these classes (datepicker, maxDateToday) worked here; unable to find it in CSS. I do not know whether above execute by JQuery; if yes then i am unable to search the same. If such classes are predefined then could you please help me finding the class?

Upvotes: 13

Views: 67870

Answers (5)

Abhishek Kanrar
Abhishek Kanrar

Reputation: 486

To make any past dates disable or for only future dates, you first have to find the instantiation of the datepicker, and set the startDate setting to '+0d'.

$('element').datepicker({
    startDate: '+0d'
});

Upvotes: 2

Garconis
Garconis

Reputation: 784

I've found, in my particular case, that it only worked if using setDefaults. For example:

<script type="text/javascript">
    jQuery( document ).ready( function ( e ) {
        if ( jQuery( '.your-date-picker-selector' ).length ) {
            jQuery.datepicker.setDefaults({
                minDate: 0,
                maxDate: "+12m"
            });
        }
    });
</script>

Upvotes: 1

Nilesh Sonkusare
Nilesh Sonkusare

Reputation: 195

Best solution for disable past dates and picks only future dates is:

Try this, it is working in my case:

$( ".selector" ).datepicker({ 
    startDate: new Date()   
});

Upvotes: 10

adeneo
adeneo

Reputation: 318182

To make any past dates unselectable, you first have to find the instantiation of the datepicker, and set the minDate setting to zero.

$('element').datepicker({
    minDate : 0
});

Upvotes: 31

Ankur Mahajan
Ankur Mahajan

Reputation: 3596

Use datepicker's minDate() method you can find api details http://api.jqueryui.com/datepicker/

$( ".selector" ).datepicker({
     minDate: new Date()
});

for this first you have to import jQuery-UI script https://code.jquery.com/ui/

I hope this will work.

Upvotes: 7

Related Questions