Question

16

Disable Months On Month/DatePicker

rated 0 times [ 17] [ 1] / answers: 1 / hits: 17067 / 9 Years ago, mon, october 5, 2015, 12:00:00

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

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mckaylab

Add To Favorites

Follow

Total Points: 311

Total Questions: 120

Total Answers: 93

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mckaylab questions

1 How to use Material UI custom variants in React with Typescript

Fri, Apr 8, 22, 00:00, 2 Years ago

1 TypeError: Cannot read properties of undefined (reading 'forEach') at Object.< anonymous> (/home/runner/myrepl/index.js:10:6

Mon, Apr 4, 22, 00:00, 2 Years ago

1 How to use the AbortController to cancel Promises in React?

Wed, Dec 1, 21, 00:00, 3 Years ago

1 How To Open HTML Date Picker Dialog On Click Anywhere Inside Input?

Mon, Apr 26, 21, 00:00, 3 Years ago

1 How to change selenium-standalone port number via webdriverio wdio file?

Wed, Jul 24, 19, 00:00, 5 Years ago

View All

answered 9 Years ago analiseg · Accepted Answer

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

});