CODEWITHSUNDEEP
javascriptjqueryjquery-ui-datepickerbootstrap-datepicker
murday1983
murday1983

Reputation: 4026

Restrict Years On Month/DatePicker

Please look at my fiddle

What I am after is for the 'Previous' button to be disabled if the year matches the current year but I also want to restrict the 'Next' button to only be enabled for the next year, which if they click it, it then becomes disabled.

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,
    changeYear: true,
    autoclose: true
});

CSS

.datepicker-switch
{
    pointer-events: none;
}

I don't want to have to add years to my code otherwise I will have to update it on a year basis and release my website, so how can this be done without adding this.

Upvotes: 2

Views: 2368

Answers (2)

acrobat
acrobat

Reputation: 2259

This solution is based on the solution of J Santosh but fixed the requirements from OP

To limit the datepicker use startDate and endDate. Pass a calculated date object to options for easy use (no update needed next year)

Reqs: startDate = this year and endDate = this + next year

Datepicker config:

$('#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'),
});

See demo: http://jsfiddle.net/RWY2X/28/

PS: changeYear is not an existing option

Upvotes: 1

J Santosh
J Santosh

Reputation: 3847

Is this what you wanted ? disabling all other years except current year

If yes then use startDate and endDate options

Demo

Upvotes: 0

Related Questions