jQuery UI DatePicker solo para mostrar el mes del año

Estoy usando jQuery date picker para mostrar el calendario en toda mi aplicación. Quiero saber si puedo usarlo para mostrar el mes y el año (mayo de 2010) y no el calendario.

Aquí hay un truco (actualizado con todo el archivo .html):

              

EDITAR jsfiddle para el ejemplo anterior: http://jsfiddle.net/DBpJe/7755/

EDITAR 2 Agrega el valor del año del mes al cuadro de entrada solo al hacer clic en el botón Listo. También permite eliminar los valores del cuadro de entrada, lo que no es posible en el campo anterior http://jsfiddle.net/DBpJe/5103/

EDIT 3 actualizado Better Solution basado en la solución de rexwolf.
http://jsfiddle.net/DBpJe/5106

Este código funciona a la perfección para mí:

    

La salida es:

enter image description here

@Ben Koehler , ¡eso es prefecto! Hice una modificación menor para que el uso de una sola instancia del selector de fecha funcione más de una vez como se esperaba. Sin esta modificación, la fecha se analiza incorrectamente y la fecha seleccionada previamente no se resalta.

               

Las respuestas anteriores son bastante buenas. Mi única queja es que no puede borrar el valor una vez que se ha establecido. También prefiero el enfoque extend-jquery-like-a-plugin.

Esto funciona perfecto para mí:

 $.fn.monthYearPicker = function(options) { options = $.extend({ dateFormat: "MM yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "" }, options); function hideDaysFromCalendar() { var thisCalendar = $(this); $('.ui-datepicker-calendar').detach(); // Also fix the click event on the Done button. $('.ui-datepicker-close').unbind("click").click(function() { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); thisCalendar.datepicker('setDate', new Date(year, month, 1)); }); } $(this).datepicker(options).focus(hideDaysFromCalendar); } 

Entonces invoque así:

 $('input.monthYearPicker').monthYearPicker(); 
  

  

Esto resolverá el problema =) Pero yo quería el timeFormat aaaa-mm

Solo lo intenté en FF4

Tuve esta misma necesidad hoy y encontré esto en github, funciona con jQueryUI y tiene selector de mes en lugar de días en el calendario

https://github.com/thebrowser/jquery.ui.monthpicker

Esto es lo que se me ocurrió. Oculta el calendario sin necesidad de un bloque de estilo adicional y agrega un botón para resolver el problema de no poder borrar el valor una vez que hace clic en la entrada. También funciona muy bien con múltiples mespickers en la misma página.

HTML:

  

JavaScript:

 $(".monthpicker").datepicker({ changeMonth: true, changeYear: true, dateFormat: "yy-mm", showButtonPanel: true, currentText: "This Month", onChangeMonthYear: function (year, month, inst) { $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month - 1, 1))); }, onClose: function(dateText, inst) { var month = $(".ui-datepicker-month :selected").val(); var year = $(".ui-datepicker-year :selected").val(); $(this).val($.datepicker.formatDate('yy-mm', new Date(year, month, 1))); } }).focus(function () { $(".ui-datepicker-calendar").hide(); }).after( $("clear").click(function() { $(this).prev().val(''); }) ); 

Necesitaba un selector de Mes / Año para dos campos (Desde y hasta) y cuando se elegía uno, el Máx. / Mín. Estaba configurado en el otro … las fechas del ticket de avión de recogida. Estaba teniendo problemas para establecer el máximo y el mínimo … las fechas del otro campo se borrarían. Gracias a varios de los mensajes anteriores … finalmente lo descubrí. Tienes que establecer opciones y fechas en un orden muy específico.

Vea este violín para la solución completa: Mes / Año Picker @ JSFiddle

Código:

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

Combiné muchas de las buenas respuestas anteriores y llegué a esto:

  $('#payCardExpireDate').datepicker( { dateFormat: "mm/yy", changeMonth: true, changeYear: true, showButtonPanel: true, onClose: function(dateText, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change'); }, beforeShow : function(input, inst) { if ((datestr = $(this).val()).length > 0) { year = datestr.substring(datestr.length-4, datestr.length); month = datestr.substring(0, 2); $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1)); $(this).datepicker('setDate', new Date(year, month-1, 1)); } } }).focus(function () { $(".ui-datepicker-calendar").hide(); $("#ui-datepicker-div").position({ my: "center top", at: "center bottom", of: $(this) }); }); 

Esto ha demostrado funcionar, pero se enfrentan muchos errores, así que me vi obligado a parchar en varios lugares de datepicker:

 if($.datepicker._get(inst, "dateFormat") === "mm/yy") { $(".ui-datepicker-calendar").hide(); } 

patch1: en _showDatepicker: para suavizar el hide;

patch2: en _checkOffset: para corregir el posicionamiento del selector de mes (de lo contrario, cuando el campo está en la parte inferior del navegador, la verificación de desplazamiento está desactivada);

patch3: en onClose of _hideDatepicker: de lo contrario, al cerrar los campos de fecha parpadeará durante un período muy corto, lo que es muy molesto.

Sé que mi solución estaba lejos de ser buena, pero por ahora está funcionando. Espero eso ayude.

¿Soy solo yo o no está funcionando como debería en IE (8)? La fecha cambia al hacer clic en “done”, pero el marcador de fecha se abre de nuevo, hasta que realmente haga clic en algún lugar de la página para perder el foco en el campo de entrada …

Estoy buscando resolver esto.

               

Si está buscando un selector de mes, pruebe este jquery.mtz.monthpicker

Esto funcionó bien para mí.

Waht about: http://www.mattkruse.com/javascript/calendarpopup/

Seleccione el ejemplo de selección de mes

Después de excavar jQueryUI.com para datepicker, aquí está mi conclusión y respuesta a su pregunta.

Primero, diría que no a su pregunta. No puede usar jQueryUI datepicker para elegir solo mes y año. No es compatible. No tiene una función de callback para eso.

Pero puede hackearlo para mostrar solo mes y año usando css para ocultar los días, etc. Y creo que no tendrá sentido, porque necesita las fechas para hacer clic para elegir una fecha.

Puedo decir que solo tienes que usar otro datepicker. Como lo sugirió Roger.

Tuve el problema del datepicker mezclado con el selector de mes. Lo solucioné así.

  $('.monthpicker').focus(function() { $(".ui-datepicker-calendar").show(); }).datepicker( { changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM/yy', create: function (input, inst) { }, onClose: function(dateText, inst) { var month = 1+parseInt($("#ui-datepicker-div .ui-datepicker-month :selected").val()); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); } }); 

Si alguien quiere eso también para múltiples calendarios, no es muy difícil agregar esta función a jquery ui. con búsqueda minificada de:

 x+='
'+(/all|left/.test(t)&&C==0?c?f:n:"")+(

agregue esto delante de x

 var accl = ''; if(this._get(a,"justMonth")) {accl = ' ui-datepicker-just_month';} 

buscar

 

También busque

 this._defaults={ 

reemplazarlo con

 this._defaults={justMonth:false, 

para CSS deberías usar:

 .ui-datepicker table.ui-datepicker-just_month{ display: none; } 

después de eso, todo está hecho simplemente vaya a las funciones de inicio datepicker que desee y proporcione la configuración var

 $('#txt_month_chart_view').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'MM yy', justMonth: true, create: function(input, inst) { $(".ui-datepicker table").addClass("badbad"); }, onClose: function(dateText, inst) { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(year, month, 1)); } }); 

justMonth: true es la clave aquí 🙂

Hizo un par de refinamientos a la respuesta casi perfecta de BrianS a continuación:

  1. He regexado el valor establecido en el show porque creo que realmente lo hace un poco más legible en este caso (aunque tenga en cuenta que estoy usando un formato ligeramente diferente)

  2. Mi cliente no quería ningún calendario, así que agregué una adición a la clase show / hide para hacer eso sin afectar a ningún otro datepickers. La eliminación de la clase se realiza con un temporizador para evitar que la tabla vuelva a parpadear cuando el marcador de fecha se desvanece, lo que parece ser muy notable en IE.

EDITAR: Un problema que queda por resolver con esto es que no hay forma de vaciar el datepicker: borre el campo y haga clic en “lejos” y se vuelva a llenar con la fecha seleccionada.

EDIT2: No he logrado resolver esto muy bien (es decir, sin agregar un botón Clear por separado junto a la entrada), así que terminé simplemente usando esto: https://github.com/thebrowser/jquery.ui.monthpicker – si alguien puede obtener la interfaz de usuario estándar para hacerlo sería increíble.

  $('.typeof__monthpicker').datepicker({ dateFormat: 'mm/yy', showButtonPanel:true, beforeShow: function(input, dpicker) { if(/^(\d\d)\/(\d\d\d\d)$/.exec($(this).val())) { var d = new Date(RegExp.$2, parseInt(RegExp.$1, 10) - 1, 1); $(this).datepicker('option', 'defaultDate', d); $(this).datepicker('setDate', d); } $('#ui-datepicker-div').addClass('month_only'); }, onClose: function(dt, dpicker) { setTimeout(function() { $('#ui-datepicker-div').removeClass('month_only') }, 250); var m = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var y = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); $(this).datepicker('setDate', new Date(y, m, 1)); } }); 

También necesita esta regla de estilo:

 #ui-datepicker-div.month_only .ui-datepicker-calendar { display:none } 

Al igual que muchos otros, me he encontrado con numerosos problemas tratando de hacer esto, y solo una combinación de las soluciones publicadas, y finalmente un gran truco para hacerlo perfecto, me ha dado una solución.

Problemas con otras soluciones en este hilo que he intentado:

  1. Seleccionar una nueva fecha en un datepicker, también cambiaría la fecha (interna) de otros datepickers, por lo que cuando abrieras los otros nuevamente (o intentaras obtener su fecha), tendrían una fecha diferente a la que se muestra en su entrada asignada -campo.
  2. El datepicker no “recordaría” la fecha cuando se abrió de nuevo.
  3. El código para hacer malabares con las fechas utilizadas substringing por lo que no era compatible con todos los formatos.
  4. “Mi selector de mes” solo cambió el campo de entrada al cerrarlo, en lugar de cada vez que se cambiaban los valores.
  5. El campo de entrada no se actualiza correctamente, si ingresa una cadena de entrada formateada incorrectamente para una fecha, y luego hace clic en ‘Cerrar’ en el selector de fecha.
  6. No puedo tener datapickers normales, que muestran los días, en la misma página que los buscadores de meses, que no muestran los días.

Finalmente encontré la manera de solucionar todos estos problemas . Los primeros cuatro se pueden arreglar simplemente teniendo cuidado con la forma en que usted hace referencia a los recolectores de su fecha y mes en su código interno, y por supuesto haciendo alguna actualización manual de sus selectores. Esto se puede ver en la instanciación, ejemplos cerca de la parte inferior. El quinto problema puede ser ayudado agregando algún código personalizado a las funciones datepicker.

NOTA: NO es necesario que use los siguientes scripts de un mes para arreglar los primeros tres problemas en su datepicker normal. Simplemente use el script de creación de fechas datepicker cerca de la parte inferior de esta publicación.

Ahora, para usar mespickers y reparar el último problema, necesitamos separar los marcadores de fecha y los mespickers. Podríamos obtener uno de los pocos complementos de jQuery-UI que buscan el mes, pero algunos carecen de la flexibilidad / capacidad de localización, algunos carecen de soporte de animación … entonces, ¿qué hacer? ¡Tira tu “propio” del datepicker-code! Esto le proporciona un selector de meses totalmente funcional, con todas las funcionalidades del datepicker, sin mostrar los días.

He proporcionado un jp-script de un mesizador y el script CSS que lo acompaña , usando el método que se describe a continuación, con el código jQuery-UI v1.11.1. Simplemente copie estos fragmentos de código en dos nuevos archivos, monthpicker.js y monthpicker.css, respectivamente.


Este es el proceso que tuve que pasar para clonar el datepicker original y convertirlo en un mespicker

Si no le importa cómo hice esto, vaya más allá de esta sección, y vaya a la línea “¡Ahora para agregar los marcadores de fecha y los meseadores a la página!”

Tomé todo el código de JavaScript de jquery-ui-1.11.1.js correspondiente a su datepicker, lo pegué en un nuevo js-file y reemplacé las siguientes cadenas:

  • “datepicker” ==> “mespicker”
  • “Datepicker” ==> “Monthpicker”
  • “selector de fecha” ==> “selector de mes”
  • “Selector de fecha” ==> “Selector de mes”

Luego eliminé la parte del for-loop que crea todo el div de ui-datepicker-calendar (las otras soluciones se ocultan usando CSS). Esto se puede encontrar en la función _generateHTML: (inst).

Encuentra la línea que dice:

 "" +

Marque todo después del cierre de la etiqueta div y baje hasta (y no incluya) la línea donde dice:

 drawMonth++; 

Ahora será infeliz, porque tenemos que cerrar algunas cosas. Después de cerrar la etiqueta-div de antes, agregue esto:

 "; 

El código ahora debería estar bien unido. Aquí hay un fragmento de código que muestra con qué debería haber terminado:

 ...other code... calender += "
" + (/all|left/.test(cornerClass) && row === 0 ? (isRTL ? next : prev) : "") + (/all|right/.test(cornerClass) && row === 0 ? (isRTL ? prev : next) : "") + this._generateMonthYearHeader(inst, drawMonth, drawYear, minDate, maxDate, row > 0 || col > 0, monthNames, monthNamesShort) + // draw month headers "
"; drawMonth++; if (drawMonth > 11) { drawMonth = 0; drawYear++; } ...other code...

Luego copié / pegué el código de jquery-ui.css perteneciente a los selectores de fecha a un nuevo archivo CSS y reemplacé las siguientes cadenas:

  • “datepicker” ==> “mespicker”

¡Ahora para agregar los marcadores de fecha y los mespickers a la página!

Estos siguientes fragmentos de código de javascript funcionan con múltiples selectores de fecha y / o mespickers en la página, ¡sin los problemas antes mencionados! Se corrigió generalmente al usar ‘$ (esto)’. mucho 🙂

El primer script es para un datepicker normal, y el segundo es para los “nuevos” mespickers.

El .after comentado, que le permite crear algún elemento para borrar el campo de entrada, es robado de la respuesta de Paul Richards.

Estoy usando el formato “MM yy” en mi mespicker, y el formato ‘yy-mm-dd’ en mi datepicker, pero esto es completamente compatible con todos los formatos , por lo que puede usar el que desee. Simplemente cambie la opción ‘dateFormat’. Las opciones estándar ‘showButtonPanel’, ‘showAnim’ y ‘yearRange’ son, por supuesto, opcionales y personalizables según sus deseos.


Agregar un datepicker

Ejemplificación de Datepicker. Este va desde hace 90 años y hasta el día de hoy. Te ayuda a mantener el campo de entrada correcto, especialmente si configuras las opciones defaultDate, minDate y maxDate, pero puede manejarlo si no lo haces. Funcionará con cualquier fechaFormato que elija.

  $('#MyDateTextBox').datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, showButtonPanel: true, showMonthAfterYear: true, showWeek: true, showAnim: "drop", constrainInput: true, yearRange: "-90:", minDate: new Date((new Date().getFullYear() - 90), new Date().getMonth(), new Date().getDate()), maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()), defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()), onClose: function (dateText, inst) { // When onClose is called after we have clicked a day (and not clicked 'Close' or outside the datepicker), the input-field is automatically // updated with a valid date-string. They will always pass, because minDate and maxDate are already enforced by the datepicker UI. // This try is to catch and handle the situations, where you open the datepicker, and manually type in an invalid date in the field, // and then close the datepicker by clicking outside the datepicker, or click 'Close', in which case no validation takes place. try { // If datepicker can parse the date using our formatstring, the instance will automatically parse // and apply it for us (after the onClose is done). // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch. // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null! var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val()); // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to // reset to the last set default date. // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;' if (typedDate == null)throw "No date selected"; // We do a manual check to see if the date is within minDate and maxDate, if they are defined. // If all goes well, the default date is set to the new date, and datepicker will apply the date for us. var minDate = $(this).datepicker("option", "minDate"); var maxDate = $(this).datepicker("option", "maxDate"); if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!"; if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!"; // We update the default date, because the date seems valid. // We do not need to manually update the input-field, as datepicker has already done this automatically. $(this).datepicker('option', 'defaultDate', typedDate); } catch (err) { console.log("onClose: " + err); // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose // a new valid date, by clicking on a day. // Instead, we set the current date, as well as the value of the input-field, to the last selected (and // accepted/validated) date from the datepicker, by getting its default date. This only works, because // we manually change the default date of the datepicker whenever a new date is selected, in both 'beforeShow' // and 'onClose'. var date = $(this).datepicker('option', 'defaultDate'); $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date)); $(this).datepicker('setDate', date); } }, beforeShow: function (input, inst) { // beforeShow is particularly irritating when initializing the input-field with a date-string. // The date-string will be parsed, and used to set the currently selected date in the datepicker. // BUT, if it is outside the scope of the minDate and maxDate, the text in the input-field is not // automatically updated, only the internal selected date, until you choose a new date (or, because // of our onClose function, whenever you click close or click outside the datepicker). // We want the input-field to always show the date that is currently chosen in our datepicker, // so we do some checks to see if it needs updating. This may not catch ALL cases, but these are // the primary ones: invalid date-format; date is too early; date is too late. try { // If datepicker can parse the date using our formatstring, the instance will automatically parse // and apply it for us (after the onClose is done). // If the input-string is invalid, 'parseDate' will throw an exception, and go to our catch. // If the input-string is EMPTY, then 'parseDate' will NOT throw an exception, but simply return null! var typedDate = $.datepicker.parseDate($(this).datepicker('option', 'dateFormat'), $(this).val()); // typedDate will be null if the entered string is empty. Throwing an exception will force the datepicker to // reset to the last set default date. // You may want to just leave the input-field empty, in which case you should replace 'throw "No date selected";' with 'return;' if (typedDate == null)throw "No date selected"; // We do a manual check to see if the date is within minDate and maxDate, if they are defined. // If all goes well, the default date is set to the new date, and datepicker will apply the date for us. var minDate = $(this).datepicker("option", "minDate"); var maxDate = $(this).datepicker("option", "maxDate"); if (minDate !== null && typedDate < minDate) throw "Date is lower than minDate!"; if (maxDate !== null && typedDate > maxDate) throw "Date is higher than maxDate!"; // We update the input-field, and the default date, because the date seems valid. // We also manually update the input-field, as datepicker does not automatically do this when opened. $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), typedDate)); $(this).datepicker('option', 'defaultDate', typedDate); } catch (err) { // Standard behavior is that datepicker does nothing to fix the value of the input field, until you choose // a new valid date, by clicking on a day. // We want the same behavior when opening the datepicker, so we set the current date, as well as the value // of the input-field, to the last selected (and accepted/validated) date from the datepicker, by getting // its default date. This only works, because we manually change the default date of the datepicker whenever // a new date is selected, in both 'beforeShow' and 'onClose', AND have a default date set in the datepicker options. var date = $(this).datepicker('option', 'defaultDate'); $(this).val($.datepicker.formatDate($(this).datepicker('option', 'dateFormat'), date)); $(this).datepicker('setDate', date); } } }) //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it // $("clear").click(function() { // $(this).prev().val(''); // }) //) ; 

Adding a monthpicker

Include the monthpicker.js file and the monthpicker.css file in the page you want to use the monthpickers.

Monthpicker instantiation The value retrieved from this monthpicker, is always the FIRST day of the selected month. Starts at the current month, and ranges from 100 years ago and 10 years into the future.

  $('#MyMonthTextBox').monthpicker({ dateFormat: 'MM yy', changeMonth: true, changeYear: true, showMonthAfterYear: true, showAnim: "drop", constrainInput: true, yearRange: "-100Y:+10Y", minDate: new Date(new Date().getFullYear() - 100, new Date().getMonth(), 1), maxDate: new Date((new Date().getFullYear() + 10), new Date().getMonth(), 1), defaultDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1), // Monthpicker functions onClose: function (dateText, inst) { var date = new Date(inst.selectedYear, inst.selectedMonth, 1); $(this).monthpicker('option', 'defaultDate', date); $(this).monthpicker('setDate', date); }, beforeShow: function (input, inst) { if ($(this).monthpicker("getDate") !== null) { // Making sure that the date set is the first of the month. if($(this).monthpicker("getDate").getDate() !== 1){ var date = new Date(inst.selectedYear, inst.selectedMonth, 1); $(this).monthpicker('option', 'defaultDate', date); $(this).monthpicker('setDate', date); } } else { // If the date is null, we reset it to the defaultDate. Make sure that the defaultDate is always set to the first of the month! $(this).monthpicker('setDate', $(this).monthpicker('option', 'defaultDate')); } }, // Special monthpicker function! onChangeMonthYear: function (year, month, inst) { $(this).val($.monthpicker.formatDate($(this).monthpicker('option', 'dateFormat'), new Date(year, month - 1, 1))); } }) //.after( // this makes a link labeled "clear" appear to the right of the input-field, which clears the text in it // $("clear").click(function() { // $(this).prev().val(''); // }) //) ; 

¡Eso es! That’s all you need to make a monthpicker.

I can’t seem to make a jsfiddle work with this, but it is working for me in my ASP.NET MVC project. Just do what you normally do to add a datepicker to your page, and incorporate the above scripts, possibly by changing the selector (meaning $(“#MyMonthTextBox”)) to something that works for you.

Espero que esto ayude a alguien.

Links to pastebins for some extra date- and monthpicker setups:

  1. Monthpicker working on the last day of the month . The date you get from this monthpicker will always be the last day of the month.

  2. Two collaborating monthpickers ; ‘start’ is working on the first of the month, and ‘end’ is working on the last of the month. They are both restricted by each other, so choosing a month on ‘end’ which is before the selected month on ‘start’, will change ‘start’ to be the same month as ‘end’. Y viceversa. OPTIONAL: When selecting a month on ‘start’, the ‘minDate’ is set on ‘end’. To remove this feature, comment out one line in onClose (read the comments).

  3. Two collaborating datepickers ; They are both restricted by each other, so choosing a date on ‘end’ which is before the selected date on ‘start’, will change ‘start’ to be the same month as ‘end’. Y viceversa. OPTIONAL: When selecting a date on ‘start’, the ‘minDate’ is set on ‘end’. To remove this feature, comment out one line in onClose (read the comments).

Add one more simple solution

  $(function() { $('.monthYearPicker').datepicker({ changeMonth: true, changeYear: true, showButtonPanel: true, dateFormat: 'M yy' }).focus(function() { var thisCalendar = $(this); $('.ui-datepicker-calendar').detach(); $('.ui-datepicker-close').click(function() { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); thisCalendar.datepicker('setDate', new Date(year, month, 1)); }); }); }); 

http://jsfiddle.net/tmnasim/JLydp/
Caracteristicas :

  • display only month/year
  • Adds the month year value to input box only on clicking of Done button
  • No “reopen” behavior when click “Done”
    ————————————
    another solution that work well for datepicker and monthpicker in the same page:(also avoid the bug of mutiple click on previous button in IE, that may occur if we use focus function)
    JS fiddle link

I liked the @user1857829 answer and his “extend-jquery-like-a-plugin approach”. I just made a litte modification so that when you change month or year in any way the picker actually writes the date in the field. I found that I’d like that behaviour after using it a bit.

 jQuery.fn.monthYearPicker = function(options) { options = $.extend({ dateFormat: "mm/yy", changeMonth: true, changeYear: true, showButtonPanel: true, showAnim: "", onChangeMonthYear: writeSelectedDate }, options); function writeSelectedDate(year, month, inst ){ var thisFormat = jQuery(this).datepicker("option", "dateFormat"); var d = jQuery.datepicker.formatDate(thisFormat, new Date(year, month-1, 1)); inst.input.val(d); } function hideDaysFromCalendar() { var thisCalendar = $(this); jQuery('.ui-datepicker-calendar').detach(); // Also fix the click event on the Done button. jQuery('.ui-datepicker-close').unbind("click").click(function() { var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); thisCalendar.datepicker('setDate', new Date(year, month, 1)); thisCalendar.datepicker("hide"); }); } jQuery(this).datepicker(options).focus(hideDaysFromCalendar); } 

I’ve had certain difficulties with the accepted answer and no other one could be used with a minimum effort as a base. So, I decided to tweak the latest version of the accepted answer until it satisfies at least minimum JS coding/reusability standards.

Here is a way much cleaner solution than the 3rd (latest) edition of the Ben Koehler ‘s accepted answer. Moreover, it will:

  • work not only with the mm/yy format, but with any other including the OP’s MM yy .
  • not hide the calendar of other datepickers on the page.
  • not implicitly pollute the global JS object with the datestr , month , year etc variables.

Echale un vistazo:

 $('.date-picker').datepicker({ dateFormat: 'MM yy', changeMonth: true, changeYear: true, showButtonPanel: true, onClose: function (dateText, inst) { var isDonePressed = inst.dpDiv.find('.ui-datepicker-close').hasClass('ui-state-hover'); if (!isDonePressed) return; var month = inst.dpDiv.find('.ui-datepicker-month').find(':selected').val(), year = inst.dpDiv.find('.ui-datepicker-year').find(':selected').val(); $(this).datepicker('setDate', new Date(year, month, 1)).change(); $('.date-picker').focusout(); }, beforeShow: function (input, inst) { var $this = $(this), // For the simplicity we suppose the dateFormat will be always without the day part, so we // manually add it since the $.datepicker.parseDate will throw if the date string doesn't contain the day part dateFormat = 'd ' + $this.datepicker('option', 'dateFormat'), date; try { date = $.datepicker.parseDate(dateFormat, '1 ' + $this.val()); } catch (ex) { return; } $this.datepicker('option', 'defaultDate', date); $this.datepicker('setDate', date); inst.dpDiv.addClass('datepicker-month-year'); } }); 

And everything else you need is the following CSS somewhere around:

 .datepicker-month-year .ui-datepicker-calendar { display: none; } 

Eso es. Hope the above will save some time for further readers.

I know it’s a little late response, but I got the same problem a couple of days before and I have came with a nice & smooth solution. First I found this great date picker here

Then I’ve just updated the CSS class (jquery.calendarPicker.css) that comes with the example like this:

 .calMonth { /*border-bottom: 1px dashed #666; padding-bottom: 5px; margin-bottom: 5px;*/ } .calDay { display:none; } 

The plugin fires an event DateChanged when you change anything, so it doesn’t matter that you are not clicking on a day (and it fits nice as a year and month picker)

¡Espero eso ayude!

I also needed a month picker. I made a simple one with year on header and 3 rows of 4 months below. Check it out: Simple monthyear picker with jQuery .

I tried the various solutions provided here and they worked fine if you simply wanted a couple of drop downs.

The best (in appearance etc) ‘picker’ ( https://github.com/thebrowser/jquery.ui.monthpicker ) suggested here is basically a copy of an old version of jquery-ui datepicker with the _generateHTML rewritten. However, I found it no longer plays nicely with current jquery-ui (1.10.2) and had other issues (doesn’t close on esc, doesn’t close on other widget opening, has hardcoded styles).

Rather than attempt to fix that monthpicker and rather than reattempt the same process with the latest datepicker, I went with hooking into the relevant parts of the existing date picker.

This involves overriding:

  • _generateHTML (to build the month picker markup)
  • parseDate (as it doesn’t like it when there’s no day component),
  • _selectDay (as datepicker uses .html() to get the day value)

As this question is a bit old and already well answered, here’s only the _selectDay override to show how this was done:

 jQuery.datepicker._base_parseDate = jQuery.datepicker._base_parseDate || jQuery.datepicker.parseDate; jQuery.datepicker.parseDate = function (format, value, settings) { if (format != "M y") return jQuery.datepicker._hvnbase_parseDate(format, value, settings); // "M y" on parse gives error as doesn't have a day value, so 'hack' it by simply adding a day component return jQuery.datepicker._hvnbase_parseDate("d " + format, "1 " + value, settings); }; 

As stated, this is an old question, but I found it useful so wanted to add feedback with an alterantive solution.

for a monthpicker, using JQuery v 1.7.2, I have the following javascript which is doing just that

$l("[id$=txtDtPicker]"). monthpicker ({
showOn: "both",
buttonImage: "../../images/Calendar.png",
buttonImageOnly: true,
pattern: 'yyyymm', // Default is 'mm/yyyy' and separator char is not mandatory
monthNames: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez']
});

Everyone here is getting value of month , year like this,

 var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); var month = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 

But just now I’m facing issue while fetching values from > and < . Because It give us value of selected value in dropdown so it provides us old value not new values.

So, As per the document of Jquery UI :- http://api.jqueryui.com/datepicker/ . We can directly fetch year , month from function. For other values like day etc. we can easily access them through inst object of jqueryUI function. We can access inst like below,

  var day = inst.selectedDay; 

So, Using onChangeMonthYear we can get current month , year and day values directly from function so no need to work out for selected value.

HTML :-

  

Script :-

 $( function() { $(".monthPicker").datepicker({ dateFormat: 'MM yy', changeMonth: true, changeYear: true, showButtonPanel: true, beforeShow: true, onChangeMonthYear: function(year , month , inst) { setTimeout(function() { $('.ui-datepicker-calendar').hide(); }); var day = inst.selectedDay; month = month; year = year; var current_date = year + "-" + month + "-" + day ; } }); $(".monthPicker").focus(function () { $(".ui-datepicker-calendar").hide(); $("#ui-datepicker-div").position({ my: "center top", at: "center bottom", of: $(this) }); }); }); 

Note :- It can be useful when we want inline monthpicker. Just replace input field to division and we can use it inline while using inline make sure you are using onChangeMonthYear ,

For Inline MonthPicker :-

 

Thanks for Ben Koehler’s solution.

However, I had a problem with multiple instances of datepickers, with some of them needed with day selection. Ben Koehler’s solution (in edit 3) works, but hides the day selection in all instances. Here’s an update that solves this issue :

 $('.date-picker').datepicker({ dateFormat: "mm/yy", changeMonth: true, changeYear: true, showButtonPanel: true, onClose: function(dateText, inst) { if($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1) { $(this).datepicker( 'setDate', new Date( $("#ui-datepicker-div .ui-datepicker-year :selected").val(), $("#ui-datepicker-div .ui-datepicker-month :selected").val(), 1 ) ).trigger('change'); $('.date-picker').focusout(); } $("#ui-datepicker-div").removeClass("month_year_datepicker"); }, beforeShow : function(input, inst) { if((datestr = $(this).val()).length > 0) { year = datestr.substring(datestr.length-4, datestr.length); month = datestr.substring(0, 2); $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1)); $(this).datepicker('setDate', new Date(year, month-1, 1)); $("#ui-datepicker-div").addClass("month_year_datepicker"); } } }); 

Use onSelect call back and remove the year portion manually and set the text in the field manually