ejemplos - jquery datetimepicker options

opción maxDate en datepicker

Question

Tengo un Jquery UI datepicker como este.

Solo puedo seleccionar mes y año desde el selector de fecha.
código:-

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

Si configuro maxDate: ''0'' el mes y año máximo que puedo seleccionar es el mes actual y el año actual.
Quiero establecer el mes y año máximo usando jquery. Para un datepicker normal con fecha, mes, año, primero maxDate: ''0'' este maxDate: ''0'' y utilicé el siguiente código para establecer la fecha máxima

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

¿Cómo puedo establecer la fecha máxima en el mes y año seleccionado? El código anterior no funciona en este caso. Por favor, dame tus sugerencias.

Answer 1

Intenté el siguiente código. Funciona bien para mí.

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

Ejemplo de violín que creé: FIDDLE

Answer 2

Pruebe esto para elegir las fechas máximo / mínimo del marcador de mes y año.

Vea este violín para la solución completa: Mes / Año 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));
}
}
});

También agregue esto a un bloque de estilo como se mencionó anteriormente:

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