Disable Months On Month/DatePicker

Question

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

Carburetor

maybe having a look at this question will give you an idea? - #21031711 – Potence

Answer 1

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

Peasant

Answer 2

what I want is for past months to be disabled and also any months after a year in advance to be disabled

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

You are on the right track. But, instead of minDate and maxDate use startDate and endDate. Like this:

$('#example1').datepicker ({
    startDate: "-0m",
    endDate: "+1y",    
    ...
});

-0m to allow only upto this month and +1y to allow only upto one year.

Fiddle: http://jsfiddle.net/abhitalks/RWY2X/34/

House

Answer 3

Use this for disabe previous & future months and enable current month & dates.

<script type="text/javascript">
$(document).ready(function () {
    var date = new Date();
    //Create Variable for first day of current month
    var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
    $("#txtDate").datepicker({
        endDate: new Date(),
        startDate: firstDay,
    });
});
</script>

Easter