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.