Datepicker do Bootstrap - Apenas meses e anos

122

Estou usando o datepicker de bootstrap e meu código é o seguinte: Demo do código no 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'
    });

O código acima está funcionando bem, mas o que estou tentando fazer é permitir que os usuários escolham apenas meses e anos.

Você poderia me dizer como fazer isso?

cinto preto
fonte
Eu usaria apenas duas caixas de seleção ... faria muito mais sentido do que usar um widget de calendário e tentar ocultar o calendário real.
6
Você ainda usaria duas caixas de seleção, mesmo se tivesse uma opção como esta jsfiddle.net/Kz2sW/1 ? :)
black_belt

Respostas:

272

Que tal agora :

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

Referência: Datepicker for Bootstrap


Para a versão 1.2.0 e mais recente, viewModefoi alterado para startView, então use:

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

Veja também a documentação .

Iswanto San
fonte
1
Obrigado, mas eu tive que substituir format: " mm"com format: "mm-yyyy". Seu trabalho agora :)
black_belt
1
Ele não mostra o -entre meses e anos se você manter um espaço antes mm-yyyyde format: " mm-yyyy",, você poderia por favor edite sua resposta de novo?
black_belt
Perfeito. Muito obrigado.
Tigin
Eu não acho que o viewMode seja uma opção válida conforme a documentação. Mas as outras opções permitiram que a exibição necessária funcionasse.
Prathamesh Datar
Existe alguma opção para fechar automaticamente?
Alauddin Ahmed
4

Estou usando a versão 2 (suporta bootstrap v2 e v3) e, para mim, isso funciona:

$("#datepicker").datepicker( {
    format: "mm/yyyy",
    startView: "year", 
    minView: "year"
});
Tanya
fonte
mudar minViewparaminViewMode
Raghavendra N
3

Para o mais recente bootstrap-datepicker(1.4.0 no momento da redação), você precisa usar o seguinte:

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

Fonte: Opções do Bootstrap Datepicker

Sheharyar
fonte
no clique do mês de inicialização, ele está mostrando a data e, em seguida, inserir texto em mm / formato yy
Shiva Saurabh
1

Estou usando o calendário de autoinicialização para uma data futura, não permitimos, com alteração permitida apenas em meses e ano.

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
fonte
1

Você deve adicionar apenas minViewMode: "months"na sua função datepicker.

Nisarg Bhavsar
fonte
0

Para visualizar os meses do ano real, visualizar apenas os meses, e com o formato solo após os meses anteriores. também pode confirmar que visualiza uma faixa de meses

<script>
('#txtDateMMyyyy').datetimepicker({
    format: "mm/yyyy",
    startView: "year",
    minView: "year"
}).datetimepicker("setDate", new Date());
</script>
Marco Puenayan
fonte
5
Obrigado por este trecho de código, que pode fornecer ajuda imediata e limitada. Uma explicação adequada melhoraria bastante seu valor a longo prazo, mostrando por que essa é uma boa solução para o problema e a tornaria mais útil para futuros leitores com outras perguntas semelhantes. Por favor edite sua resposta para adicionar alguma explicação, incluindo as suposições que você fez.
Ismael Padilla
Se Agrego una pequeña descripcion de lo que hace el codigo
Marco Puenayan
-1

Por que não chamar o $('.input-group.date').datepicker("remove");quando a instrução select for alterada, defina sua exibição de data e selecione o$('.input-group.date').datepicker("update");

Kiel
fonte