MaxDate option in datepicker

Question

I have a jQuery type dump like this.

I can only choose the month and year from the date. code: -

$('#datepicker').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'M yy', maxDate: '0', onClose: function() { var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); }, beforeShow: function(input, inst) { $(inst.dpDiv).addClass('calendar-off'); } }); 

If I set maxDate: '0' , the maximum month and year I can choose is the current month and the current year.
I want to set the maximum month and year using jquery. For a regular datepicker with date, month, year, first I delete this maxDate: '0' code maxDate: '0' and I used the following code to set the maximum date

 var maximumDate = '07-15-2013'; $("#datepicker" ).datepicker( "option", "maxDate", maximumDate); 

How to set the maximum date per month and year? The above code does not work in this case. Please give me your suggestions.

Answer 1

Tried the following code. It works great for me.

  var date = new Date("2013-07-15"); var currentMonth = date.getMonth(); var currentDate = date.getDate(); var currentYear = date.getFullYear(); $("#datepicker" ).datepicker( "option", "maxDate", new Date(currentYear, currentMonth, currentDate)); 

Example script I created: FIDDLE

Answer 2

Try to select the maximum / minimum dates from the month and datepicker dates.

Check out this script for a complete solution: Month / Year Picker @JSFiddle

 var searchMinDate = "-2y"; var searchMaxDate = "-1m"; if ((new Date()).getDate() <= 5) { searchMaxDate = "-2m"; } $("#txtFrom").datepicker({ dateFormat: "M yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "", minDate: searchMinDate, maxDate: searchMaxDate, showButtonPanel: true, beforeShow: function (input, inst) { if ((datestr = $("#txtFrom").val()).length > 0) { var year = datestr.substring(datestr.length - 4, datestr.length); var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort')); $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtFrom").datepicker('setDate', new Date(year, month, 1)); } }, onClose: function (input, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtFrom").datepicker('setDate', new Date(year, month, 1)); var to = $("#txtTo").val(); $("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1)); if (to.length > 0) { var toyear = to.substring(to.length - 4, to.length); var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort')); $("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1)); $("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1)); } } }); $("#txtTo").datepicker({ dateFormat: "M yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "", minDate: searchMinDate, maxDate: searchMaxDate, showButtonPanel: true, beforeShow: function (input, inst) { if ((datestr = $("#txtTo").val()).length > 0) { var year = datestr.substring(datestr.length - 4, datestr.length); var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort')); $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtTo").datepicker('setDate', new Date(year, month, 1)); } }, onClose: function (input, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1)); $("#txtTo").datepicker('setDate', new Date(year, month, 1)); var from = $("#txtFrom").val(); $("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1)); if (from.length > 0) { var fryear = from.substring(from.length - 4, from.length); var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort')); $("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1)); $("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1)); } } }); 

Also add this to the style block as above:

 .ui-datepicker-calendar { display: none !important; }