Search code examples
javascriptjqueryjquery-ui-datepickerbootstrap-datepicker

Disable Months On Month/DatePicker


Please look at my fiddle.

I have a monthpicker which only allows users to select a year in advance but what I want is for past months to be disabled and also any months after a year in advance to be disabled but I cant figure out how to get this to work.

Example Scenario Current month is 'October' so for 'Year 2015' months 'Jan to Sept' will be disabled and months 'Nov to Dec' will be disabled for 'Year 2016'

I have tried using minDate: "0" and maxDate: "1y" but they don't work.

HTML

<div class="input-group date" style="width: 200px">
    <input type="text" id="example1" class="form-control" style="cursor: pointer"/>
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
</div>

JQuery

$('#example1').datepicker
({
    format: "MM yyyy",
    minViewMode: 1,
    autoclose: true,
    startDate: new Date(new Date().getFullYear(), '0', '01'),
    endDate: new Date(new Date().getFullYear()+1, '11', '31')
});

Solution

  • DEMO

    You can do it with startDate and endDate but try assigning date variable somewhere outside as below:

    var date=new Date();
    var year=date.getFullYear(); //get year
    var month=date.getMonth(); //get month
    
    $('#example1').datepicker
    ({
        format: "MM yyyy",
        minViewMode: 1,
        autoclose: true,
        startDate: new Date(year, month, '01'), //set it here
        endDate: new Date(year+1, month, '31')
    });