Bootstrap Datepicker - Meses y años solamente


122

Estoy usando bootstrap datepicker y mi código es como el siguiente, Demo del código en jsfiddle

<div class="input-append date" id="datepicker" data-date="02-2012" 
     data-date-format="mm-yyyy">

 <input  type="text" readonly="readonly" name="date" >    
 <span class="add-on"><i class="icon-th"></i></span>      
</div>      


$("#datepicker").datepicker({
        viewMode: 'years',
         format: 'mm-yyyy'
    });

El código anterior está funcionando bien, pero lo que estoy tratando de hacer es permitir a los usuarios elegir meses y años solamente.

¿Podrías decirme cómo hacerlo?


Solo usaría dos cuadros de selección ... tendría mucho más sentido que usar un widget de calendario e intentar ocultar el calendario real.

66
¿Seguiría utilizando dos cuadros de selección incluso si tuviera una opción como esta jsfiddle.net/Kz2sW/1 ? :)
black_belt

Respuestas:


272

Qué tal esto :

$("#datepicker").datepicker( {
    format: "mm-yyyy",
    viewMode: "months", 
    minViewMode: "months"
});

Referencia: Datepicker para Bootstrap


Para la versión 1.2.0 y posteriores, viewModeha cambiado a startView, así que use:

$("#datepicker").datepicker( {
    format: "mm-yyyy",
    startView: "months", 
    minViewMode: "months"
});

Ver también la documentación .


1
Gracias pero tuve que reemplazar format: " mm"con format: "mm-yyyy". Está funcionando ahora :)
black_belt

1
No muestra el -entre meses y años si se mantiene un espacio antes mm-yyyyde format: " mm-yyyy",, ¿podría por favor, edite su respuesta de nuevo?
black_belt

Perfecto. Muchas gracias.
Tigin

No creo que viewMode sea una opción válida según la documentación. Pero las otras opciones permitieron que funcionara la pantalla requerida.
Prathamesh Datar

¿Hay alguna opción para el cierre automático?
Alauddin Ahmed


4

Estoy usando la versión 2 (admite tanto bootstrap v2 como v3) y para mí esto funciona:

$("#datepicker").datepicker( {
    format: "mm/yyyy",
    startView: "year", 
    minView: "year"
});

cambiar minViewaminViewMode
Raghavendra N

3

Para lo último bootstrap-datepicker(1.4.0 en el momento de la escritura), debe usar esto:

$('#myDatepicker').datepicker({
    format: "mm/yyyy",
    startView: "year", 
    minViewMode: "months"
})

Fuente: Opciones de Bootstrap Datepicker


al hacer clic en el mes en bootstrap, muestra la fecha y luego ingresa el texto en formato mm / aa
Shiva Saurabh

1

Estoy usando el calendario de arranque para una fecha futura no permitida con el cambio de permiso solo en meses y años.

var j = jQuery.noConflict();
        j(function () {
            j(".datepicker").datepicker({ dateFormat: "dd-M-yy" }).val()
        });

        j(function () {
            j(".Futuredatenotallowed").datepicker({
                changeMonth: true,
                maxDate: 0,
                changeYear: true,
                dateFormat: 'dd-M-yy',
                language: "tr"
            }).on('changeDate', function (ev) {
                $(this).blur();
                $(this).datepicker('hide');
            }).val()
        });


0

Para visualizar los meses del año actual, visualizar solo los meses, y con el formato solo tomar los meses de ese año. tambien se puede confirmar para que se visualice una cierta cantidad de meses

<script>
('#txtDateMMyyyy').datetimepicker({
    format: "mm/yyyy",
    startView: "year",
    minView: "year"
}).datetimepicker("setDate", new Date());
</script>

55
Gracias por este fragmento de código, que podría proporcionar una ayuda limitada e inmediata. Una explicación adecuada mejoraría enormemente su valor a largo plazo al mostrar por qué esta es una buena solución al problema y la haría más útil para futuros lectores con otras preguntas similares. Por favor, editar su respuesta a añadir un poco de explicación, incluyendo los supuestos realizados.
Ismael Padilla

Se agrego una pequeña descripción de lo que hace el codigo
Marco Puenayan

-1

¿Por qué no llamar al $('.input-group.date').datepicker("remove");cuando se cambia la instrucción select y luego configurar su vista de selector de fecha y luego llamar al$('.input-group.date').datepicker("update");

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.