在日期选择器上禁用给定日期的过去日期

Question

I am trying to have a date Range selected using the UI date picker.

in the from field people should not be able to view or select dates previous to the given day.

My Code:

<input type="text" class="form-control" name="from_date" id="f_date"
                       value="{{ Session::get('reviewerJoiningInfo.join_date') ? Session::get('reviewerJoiningInfo.join_date') : null }}"
                       placeholder="From Date" onkeydown="return false" autocomplete="off">

getting a date from the session

$('#f_date').datepicker({
                format: 'dd-mm-yyyy',
            }).on('changeDate', function (ev) {
                    var rev_join_date = $('#f_date').val()
                    var reviewer_join_date = $('#reviewer_join_date').val()
                    if(rev_join_date < reviewer_join_date){
                        $('#f_date').val(reviewer_join_date)
                    }
                    $(this).datepicker('hide');
                }
            );

I used minDate: date but not working.

Answer 1

To disable past year date you can pass yearrange in parameters. like

yearRange: '1950:2013', // specifying a hard coded year range

or

   yearRange: "c-100:c+0", // last hundred years and current years

Example:

$(document).ready(function() {
    $("#date").datepicker({
        changeYear:true,
        yearRange: "2005:2015"
    });
});

previous 10 years and next 10 years:

 $('#datepicker2').datepicker({
     changeMonth: true,
     changeYear: true,
     minDate: 0,
     yearRange: 'c-10:c+20',

 }); 

if you want to disable past Date you can pass startDate or minDate

  $('#date').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
     minDate: new Date(),
});

FIDDLE: For disabling past dates https://jsfiddle.net/p0deLk56/