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.