Disable Months On Month/DatePicker

murday1983 picture murday1983 · Oct 5, 2015 · Viewed 11.7k times · Source

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

Answer

Guruprasad J Rao picture Guruprasad J Rao · Oct 5, 2015

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