Bootstrap Datepicker - Solo mesi e anni


122

Sto usando bootstrap datepicker e il mio codice è come segue, Demo del codice su 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'
    });

Il codice sopra funziona correttamente, ma quello che sto cercando di fare è consentire agli utenti di scegliere solo mesi e anni.

Potresti dirmi come farlo per favore?


Userei solo due caselle di selezione ... avrebbe molto più senso che usare un widget di calendario e provare a nascondere il calendario effettivo.

6
Useresti ancora due caselle di selezione anche se avessi un'opzione come questa jsfiddle.net/Kz2sW/1 ? :)
black_belt

Risposte:


272

Cosa ne pensi di questo :

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

Riferimento: Datepicker per Bootstrap


Per la versione 1.2.0 e successive, viewModeè stato modificato in startView, quindi utilizzare:

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

Vedi anche la documentazione .


1
Grazie ma ho dovuto sostituire format: " mm"con format: "mm-yyyy".
Funziona

1
Non mostra i -mesi e gli anni se mantieni uno spazio prima mm-yyyydi format: " mm-yyyy",, potresti modificare di nuovo la tua risposta?
black_belt

Perfetto. Grazie mille.
Tigin

Non penso che viewMode sia un'opzione valida secondo la documentazione. Ma le altre opzioni consentivano al display richiesto di funzionare.
Prathamesh Datar

C'è qualche opzione per la chiusura automatica?
Alauddin Ahmed


4

Sto usando la versione 2 (supporta sia bootstrap v2 che v3) e per me funziona:

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

cambiare minViewinminViewMode
Raghavendra N

3

Per l'ultimo bootstrap-datepicker(1.4.0 al momento della scrittura), è necessario utilizzare questo:

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

Fonte: Opzioni di Bootstrap Datepicker


al clic del mese in bootstrap, mostra la data e quindi inserisce il testo in formato mm / aa
Shiva Saurabh

1

Sto usando il calendario bootstrap per la data futura non consentita con la modifica consentita solo in mesi e anno ..

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 visualiar los meses of año actual, visualiza solo los meses, y con el formato solo toma los meses de ese año. tambien se puede confermare para que se visualice una cierta cantidad de meses

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

5
Grazie per questo snippet di codice, che potrebbe fornire un aiuto limitato e immediato. Una spiegazione adeguata migliorerebbe notevolmente il suo valore a lungo termine mostrando perché questa è una buona soluzione al problema e la renderebbe più utile per i futuri lettori con altre domande simili. Si prega di modificare la risposta di aggiungere qualche spiegazione, tra le ipotesi che hai fatto.
Ismael Padilla

Se agrego una pequeña descripcion de lo que hace el
codigo

-1

Perché non chiamare il $('.input-group.date').datepicker("remove");quando l'istruzione select viene modificata, quindi impostare la visualizzazione del datepicker quindi chiamare il$('.input-group.date').datepicker("update");

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.