jQuery UI DatePicker para mostrar solo mes año

374

Estoy usando el selector de fecha jQuery 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?

javascript jquery date jquery-ui jquery-ui-datepicker Aanu
fuente

16

¿Entonces quieres un mes recolector?

dotty

¿Estás utilizando jQueryUI DatePicker?

wpjmurray

Si. jQueryUI DatePicker

Aanu

66

esta no es una respuesta a su pregunta, pero tenemos esto ahora, se ve mucho mejor: eternicode.github.io/bootstrap-datepicker/…

Ruben

El bootstrap-datepicker parece un repositorio descontinuado, con los problemas acumulados sin ningún trabajo notable para solucionarlos ...

kumarharsh

424

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <script type="text/javascript">
        $(function() {
            $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            onClose: function(dateText, inst) { 
                $(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
            }
            });
        });
    </script>
    <style>
    .ui-datepicker-calendar {
        display: none;
    }
    </style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

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

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

EDIT 3 actualizó Mejor solución basada en la solución de rexwolf inactiva.
http://jsfiddle.net/DBpJe/5106

Ben Koehler
fuente

14

Llamar a 'setDate' volverá a abrir el selector en algunos navegadores. Para evitar esto, deshabilitó y habilitó el selector: $ (this) .datepicker ('deshabilitar'); $ (this) .datepicker ('setDate', new Date (año1, mes1, 1)); $ (this) .datepicker ('habilitar');

Sven Sönnichsen

1

@Sven aquí es una alternativa:$(this).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));

ThiamTeck

1

Estoy tratando de usar esta solución, pero el uso de getDate en un selector de fecha solo regresa hoy. ¿Qué pasa?

supertopi

1

Veo que la mayoría de los ejemplos están usando estilos en línea en la página misma. Esto sería un problema si de alguna manera necesita más de un calendario (cada uno con una configuración diferente, por ejemplo) en la misma página. Prefiero agregar estilos en el archivo .css como tal:

#ui-datepicker-div.noCalendar .ui-datepicker-calendar, #ui-datepicker-div.noCalendar .ui-datepicker-header a {display: none;}  #ui-datepicker-div.noCalendar .ui-datepicker-header .ui-datepicker-title{width: 100%; margin: 0;}

y luego usar Javascript para manipular el comportamiento:$("#ui-datepicker-div").addClass('noCalendar');

poweratom

1

En el ejemplo anterior Si quiero borrar el cuadro de texto, entonces no puedo. Alguien puede ayudarme.

Bik

83

Este código me funciona perfectamente:

<script type="text/javascript">
$(document).ready(function()
{   
    $(".monthPicker").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).val($.datepicker.formatDate('MM yy', new Date(year, month, 1)));
        }
    });

    $(".monthPicker").focus(function () {
        $(".ui-datepicker-calendar").hide();
        $("#ui-datepicker-div").position({
            my: "center top",
            at: "center bottom",
            of: $(this)
        });
    });
});
</script>

<label for="month">Month: </label>
<input type="text" id="month" name="month" class="monthPicker" />

Salida es:

Leniel Maccaferri
fuente

¿Cómo se puede establecer un valor para este calendario?

Rafik malek

62

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
    <script type="text/javascript">
    $(function() {
        $('.date-picker').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy',
            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));
            },
            beforeShow : function(input, inst) {
                var datestr;
                if ((datestr = $(this).val()).length > 0) {
                    year = datestr.substring(datestr.length-4, datestr.length);
                    month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNamesShort'));
                    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
                    $(this).datepicker('setDate', new Date(year, month, 1));
                }
            }
        });
    });
    </script>
    <style>
    .ui-datepicker-calendar {
        display: none;
        }
    </style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

BrianS
fuente

Esta respuesta es mayormente correcta. Sin embargo, tuve que cambiar MM a M para obtener el mes correcto para seleccionar cuando una fecha ya está seleccionada.

Chazaq

18

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

Luego invoque así:

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

usuario1857829
fuente

2

al final estoy rechazando esto porque es inviable, ya que los eventos onSelect y / o onChangeMonthYear y / o onClose no se activan o no reciben los valores correctos o, si se reemplazan, hacen que el widget deje de funcionar

Knocte

10

<style>
.ui-datepicker table{
    display: none;
}

<script type="text/javascript">
$(function() {
    $( "#manad" ).datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'yy-mm',
        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));
        },
        beforeShow : function(input, inst) {
            if ((datestr = $(this).val()).length > 0) {
                actDate = datestr.split('-');
                year = actDate[0];
                month = actDate[1]-1;
                $(this).datepicker('option', 'defaultDate', new Date(year, month));
                $(this).datepicker('setDate', new Date(year, month));
            }
        }
    });
});

Esto resolverá el problema =) Pero quería el formato de tiempo aaaa-mm

Aunque solo lo intenté en FF4

Erik Polder
fuente

"yy" en JQuery es un año de cuatro dígitos. Si esto es lo que quieres, acabas de lograrlo.

Paweł Dyda

9

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

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

Anthony Shaw
fuente

55

No se mantiene, pero hay un tenedor: github.com/zorab47/jquery.ui.monthpicker

denis.peplin

8

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

HTML:

<input type='text' class='monthpicker'>

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(
    $("<a href='javascript: void(0);'>clear</a>").click(function() {
        $(this).prev().val('');
    })
);

Paul Richards
fuente

5

Necesitaba un selector de Mes / Año para dos campos (Desde y Hasta) y cuando se eligió uno, el Máx / Mín se configuró en el otro ... a la hora de elegir las fechas de los boletos aéreos. Estaba teniendo problemas para establecer el máximo y el mínimo ... las fechas del otro campo se borrarían. Gracias a varias de las publicaciones anteriores ... finalmente lo descubrí. Debe configurar las opciones y las fechas en un orden muy específico.

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

        }
    });

Agregue también esto a un bloque de estilo como se mencionó anteriormente:

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

Amy golpeó
fuente

5

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 se demostró que funciona pero enfrenta muchos errores, así que me vi obligado a parchear en varios lugares de datepicker:

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

parche1: en _showDatepicker: para suavizar la piel;

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 comprobación de desplazamiento está desactivada);

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

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

rexwolf
fuente

JUst agregue esta línea a beforeShow: {inst.dpDiv.addClass ('month_year_datepicker')}. las fechas que parpadean se detendrán :). También creo que .focus no será necesario entonces

Parag

5

Agregue una solución simple más

 $(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/
Características :

mostrar solo mes / año
Agrega el valor del mes mes al cuadro de entrada solo al hacer clic en el botón Listo
No hay comportamiento de "reapertura" cuando se hace clic en "Listo"
------------------------------------
otra solución que funciona bien para datepicker y monthpicker en la misma página: (también evite el error de mutiple haga clic en el botón anterior en IE, que puede ocurrir si usamos la función de enfoque)
JS fiddle link

Chris Phan
fuente

4

¿Soy solo yo o no funciona como debería en IE (8)? La fecha cambia al hacer clic en Listo, pero el selector de fecha se abre de nuevo, hasta que haga clic en algún lugar de la página para perder el foco en el campo de entrada ...

Estoy buscando resolver esto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css">
<script type="text/javascript">
$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
        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));
        }
    });
});
</script>
<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>
</head>
<body>
    <label for="startDate">Date :</label>
    <input name="startDate" id="startDate" class="date-picker" />
</body>
</html>

Tom Van Schoor
fuente

1

$ (this) .datepicker ('deshabilitar'); $ (this) .datepicker ('setDate', new Date (año, mes, 1)); $ (this) .datepicker ('habilitar'); Resuelve el problema

Tom Van Schoor

1

Esta no es una respuesta

sisharp

4

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

Esto me funcionó bien.

options = {
    pattern: 'yyyy-mm', // Default is 'mm/yyyy' and separator char is not mandatory
    selectedYear: 2010,
    startYear: 2008,
    finalYear: 2012,
    monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

$('#custom_widget').monthpicker(options);

usuario2630080
fuente

Link está muerto. No se puede acceder a este sitio | No se pudo encontrar la dirección DNS del servidor de lucianocosta.info.

Pang

1

Aquí hay un enlace actualizado: lucianocosta.com.br/jquery.mtz.monthpicker

Sebastian S.

El enlace actualizado también está roto.

Nasch

4

Como muchos otros, me he encontrado con numerosos problemas al intentar hacer esto, y solo una combinación de las soluciones publicadas, y eventualmente un gran truco para hacerlo perfecto, tiene me dado una solución.

Problemas con otras soluciones en este hilo que he probado:

Al seleccionar una nueva fecha en un selector de fechas, también cambiaría la fecha (interna) de otros seleccionadores de fechas, por lo que cuando abriera los otros nuevamente (o intentara obtener su fecha), tendrían una fecha diferente a la que se muestra en su entrada asignada -campo.
El selector de fechas no "recordará" la fecha cuando se abre de nuevo.
El código para hacer malabares con las fechas usaba subcadenas, por lo que no era compatible con todos los formatos.
"Mi selección de mes" solo cambió el campo de entrada al cerrarlo, en lugar de cuando se cambiaron los valores.
El campo de entrada no se actualiza correctamente, si escribe una cadena de entrada con formato incorrecto para una fecha y luego hace clic en 'Cerrar' en el selector de fechas.
No puedo tener datepickers normales, que muestran los días, en la misma página que los mespickers, que no muestran los días.

Finalmente he encontrado una manera de solucionar todos estos problemas . Los primeros cuatro se pueden solucionar simplemente teniendo cuidado de cómo hace referencia a sus selectores de fecha y mes en su código interno y, por supuesto, haciendo alguna actualización manual de sus selectores. Esto se puede ver en los ejemplos de instanciación cerca de la parte inferior. El quinto problema puede solucionarse agregando un código personalizado a las funciones de selector de fechas.

NOTA: NO necesita utilizar los siguientes scripts de selección de mes para solucionar los primeros tres problemas en su selector de fecha normal. Simplemente use el script de instanciación datepicker cerca del final de esta publicación.

Ahora, para usar los marcadores de mes y solucionar el último problema, necesitamos separar los marcadores de fecha y los marcadores de mes. Podríamos obtener uno de los pocos complementos de jQuery-UI monthpicker, pero algunos carecen de flexibilidad / capacidad de localización, algunos carecen de soporte de animación ... entonces, ¿qué hacer? ¡Haga rodar su "propio" del código datepicker! Esto le ofrece un selector de mes completamente funcional, con todas las funcionalidades del selector de fecha, solo que sin mostrar días.

He suministrado una monthpicker js-escritura y el CSS-script que acompaña , usando el método descrito a continuación, con el código v1.11.1 jQuery-UI. Simplemente copie estos fragmentos de código en dos archivos nuevos, monthpicker.js y monthpicker.css, respectivamente.

Si desea leer sobre el proceso bastante simple por el cual convertí el selector de fecha en un selector de mes, desplácese hacia abajo hasta la última sección.

¡Ahora para agregar los datepickers y mespickers a la página!

¡Estos siguientes fragmentos de código de JavaScript funcionan con múltiples fechadores y / o meseros en la página, sin los problemas mencionados anteriormente! Solucionado generalmente usando '$ (this)'. mucho :)

El primer script es para un selector de fechas normal, y el segundo es para los "nuevos" seleccionadores de mes.

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 aa" en mi selector de mes y el formato 'aa-mm-dd' en mi selector de fecha, 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 selector de fechas

Creación de una instancia de Datepicker. Este va desde hace 90 años y hasta nuestros días. Le ayuda a mantener el campo de entrada correcto, especialmente si establece las opciones defaultDate, minDate y maxDate, pero puede manejarlo si no lo hace. Funcionará con cualquier formato de fecha 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
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

Agregar un selector de mes

Incluya el archivo monthpicker.js y el archivo monthpicker.css en la página que desea usar los mespickers.

Creación de instancias de Monthpicker El valor recuperado de este mespicker es siempre el PRIMER día del mes seleccionado. Comienza en el mes actual y abarca desde hace 100 años y 10 años en el futuro.

    $('#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
    //    $("<a href='javascript: void(0);'>clear</a>").click(function() {
    //        $(this).prev().val('');
    //    })
    //)
    ;

¡Eso es! Eso es todo lo que necesitas para hacer un mes.

Parece que no puedo hacer que un jsfiddle funcione con esto, pero está funcionando para mí en mi proyecto ASP.NET MVC. Simplemente haga lo que normalmente hace para agregar un selector de fecha a su página e incorpore los scripts anteriores, posiblemente cambiando el selector (que significa $ ("# MyMonthTextBox")) a algo que funcione para usted.

Espero que esto ayude a alguien.

Enlaces a pastebins para algunas configuraciones adicionales de selección de fecha y mes:

Monthpicker trabajando el último día del mes . La fecha que obtenga de este selector de mes siempre será el último día del mes.
Dos meseros colaboradores ; 'inicio' funciona el primer mes y 'fin' funciona el último mes. Ambos están restringidos entre sí, por lo que elegir un mes en 'fin' que es anterior al mes seleccionado en 'inicio' cambiará 'inicio' para que sea el mismo mes que 'fin'. Y viceversa. OPCIONAL: Al seleccionar un mes en 'inicio', el 'minDate' en 'fin' se establece en ese mes. Para eliminar esta función, comente una línea en onClose (lea los comentarios).
Dos datepickers colaboradores ; Ambos están restringidos entre sí, por lo que elegir una fecha en 'fin' que sea anterior a la fecha seleccionada en 'inicio' cambiará 'inicio' para que sea el mismo mes que 'fin'. Y viceversa. OPCIONAL: Al seleccionar una fecha en 'inicio', el 'minDate' en 'fin' se establece en esa fecha. Para eliminar esta función, comente una línea en onClose (lea los comentarios).

Cómo cambié el DatePicker para que sea un MonthPicker

Tomé todo el código javascript de jquery-ui-1.11.1.js perteneciente a su selector de fechas, lo pegué en un nuevo archivo js 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 ciclo for que crea todo el div ui-datepicker-calendar (el div que otras soluciones ocultan usando CSS). Esto se puede encontrar en _generateHTML: function (inst).

Encuentra la línea que dice:

"</div><table class='ui-datepicker-calendar'><thead>" +

Marque todo desde después del cierre de la etiqueta div y hacia abajo (y sin incluir) la línea donde dice:

drawMonth++;

Ahora será infeliz porque necesitamos 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 lo que debería haber terminado:

...other code...

calender += "<div class='ui-monthpicker-header ui-widget-header ui-helper-clearfix" + cornerClass + "'>" +
                (/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
                "</div>";
            drawMonth++;
            if (drawMonth > 11) {
                drawMonth = 0;
                drawYear++;
            }

...other code...

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

"datepicker" ==> "mespicker"

Ultroman el Tacoman
fuente

3

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 función de devolución de llamada 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 que se haga clic en las fechas para elegir una fecha.

Puedo decir que solo tienes que usar otro selector de fechas. Como lo que sugirió Roger.

Reigel
fuente

3

Tuve el problema del selector de fecha mezclado con el selector de mes. Lo resolví 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();

        }
    });

PYT
fuente

3

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

x+='<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix'+t+'">'+(/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

<table class="ui-datepicker-calendar

y reemplazarlo con

<table class="ui-datepicker-calendar'+accl+'

también busque

this._defaults={

reemplazarlo con

this._defaults={justMonth:false,

para css debes usar:

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

después de que todo esté listo, simplemente vaya a las funciones init de 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í :)

prdatur
fuente

2

Acerca de: http://www.mattkruse.com/javascript/calendarpopup/

Seleccione el ejemplo de selección de mes

Roger
fuente

Como ya estoy usando jquery datepicker, prefiero usarlo o construir el mes y el año manualmente.

Aanu

2

Hice un par de mejoras a la respuesta casi perfecta de BrianS arriba:

Regexé el valor establecido en el programa porque creo que en realidad lo hace un poco más legible en este caso (aunque tenga en cuenta que estoy usando un formato ligeramente diferente)
Mi cliente no quería un calendario, así que agregué una adición a la clase show / hide para hacerlo sin afectar a ningún otro selector de fechas. La eliminación de la clase está en un temporizador para evitar que la tabla vuelva a parpadear a medida que el selector de fechas 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 selector de fechas: borre el campo y haga clic y se volverá a llenar con la fecha seleccionada.

EDIT2: no he logrado resolver esto bien (es decir, sin agregar un botón Clear separado al lado de la entrada), así que terminé 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 necesitas esta regla de estilo:

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

El alcoholismo
fuente

2

Me gustó la respuesta @ user1857829 y su "enfoque extend-jquery-like-a-plugin". Acabo de hacer una pequeña modificación para que, cuando cambies el mes o el año, el selector escriba la fecha en el campo. Descubrí que me gustaría ese comportamiento después de usarlo un poco.

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

stravanato
fuente

2

He tenido ciertas dificultades con la respuesta aceptada y ninguna otra podría usarse con un mínimo esfuerzo como base. Entonces, decidí ajustar la última versión de la respuesta aceptada hasta que cumpla al menos con los estándares mínimos de codificación / reutilización de JS.

Aquí hay una solución mucho más limpia que la tercera (última) edición de la respuesta aceptada de Ben Koehler . Además:

funciona no solo con el mm/yyformato, sino con cualquier otro, incluidos los OPMM yy .
no oculte el calendario de otros datepickers en la página.
no contaminan implícitamente el objeto global con el JS datestr, month, yearetc 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');
    }
});

Y todo lo que necesitas es el siguiente CSS en algún lugar:

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

Eso es. Espero que lo anterior ahorre algo de tiempo para más lectores.

Alexander Abakumov
fuente

1

Justo y para tu información. La línea 'inst.dpDiv.addClass (' datepicker-month-year ');' agregará todo el mes al año al div de calendario de datepicker, lo que significa que si hay otros campos de fecha con datepicker, dejarán de funcionar debido a eso. Como solo hay un div para el calendario, sería interesante agregar un '$ ('. Datepicker-month-year '). RemoveClass (' datepicker-month-year ');' usando el beforeShow en cualquier otro selector de fechas que requiera el calendario tradicional. O, elimine la clase cuando pierda el foco. Pero no pude encontrar nada relacionado con eso en la API

Johnny Bigoode

1

Esta es la respuesta completa que todos deberían usar. El mayor problema resuelto para mí fue que la ventana emergente de entrada de fecha siempre se ajusta al mes y año actual, independientemente de lo que ya esté en él. Esta respuesta lo arregló.

Alex F

1

Sé que es una respuesta tardía, pero tuve el mismo problema un par de días antes y encontré una solución agradable y fluida. Primero encontré este gran selector de fechas aquí

Luego, acabo de actualizar la clase CSS (jquery.calendarPicker.css) que viene con el ejemplo de esta manera:

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

.calDay 
{
    display:none;
}

El complemento activa un evento DateChanged cuando cambia algo, por lo que no importa que no haga clic en un día (y se adapta bien como un selector de año y mes)

¡Espero eso ayude!

pjnovas
fuente

1

También necesitaba un mes recolector. Hice uno simple con año en el encabezado y 3 filas de 4 meses a continuación. Compruébalo: selector de mes simple con jQuery .

Tiago Coelho
fuente

1

Probé las diversas soluciones proporcionadas aquí y funcionaron bien si simplemente quería un par de menús desplegables.

El mejor 'selector' (en apariencia, etc.) ( https://github.com/thebrowser/jquery.ui.monthpicker ) sugerido aquí es básicamente una copia de una versión antigua de jquery-ui datepicker con el _generateHTML reescrito. Sin embargo, descubrí que ya no funciona bien con jquery-ui actual (1.10.2) y tenía otros problemas (no se cierra en esc, no se cierra en la apertura de otro widget, tiene estilos codificados).

En lugar de intentar arreglar ese selector de mes y en lugar de volver a intentar el mismo proceso con el último selector de fechas, decidí conectarme a las partes relevantes del selector de fechas existente.

Esto implica anular:

_generateHTML (para construir el marcado del selector de mes)
parseDate (ya que no le gusta cuando no hay componente de día),
_selectDay (como datepicker usa .html () para obtener el valor del día)

Como esta pregunta es un poco vieja y ya está bien respondida, aquí solo se muestra la anulación _selectDay para mostrar cómo se hizo esto:

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

Como se dijo, esta es una pregunta antigua, pero la encontré útil, así que quería agregar comentarios con una solución alternativa.

freedomn-m
fuente

0

para un mes, usando JQuery v 1.7.2, tengo el siguiente javascript que está haciendo exactamente eso

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

Ricardo Appleton
fuente

0

Gracias por la solución de Ben Koehler.

Sin embargo, tuve un problema con varias instancias de datepickers, y algunas de ellas fueron necesarias con la selección del día. La solución de Ben Koehler (en la edición 3) funciona, pero oculta la selección del día en todos los casos. Aquí hay una actualización que resuelve este problema:

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

dj3c1t
fuente

-2

Utilice la onSelectdevolución de llamada y elimine la parte del año manualmente y configure el texto en el campo manualmente

Teja Kantamneni
fuente

3

Creo que no estás leyendo la pregunta. Aanu quiere "mostrar el mes y el año (mayo de 2010) y no el calendario".

Reigel