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

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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>