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?

cinta negra
fuente
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 .

Iswanto San
fuente
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"
});
Tanya
fuente
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

Sheharyar
fuente
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()
        });
vishal kumar Saxena
fuente
1

Debería agregar solo minViewMode: "months"en su función datepicker.

Nisarg Bhavsar
fuente
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>
Marco Puenayan
fuente
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");

Kiel
fuente