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?


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 .


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"
});

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


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()
        });

1

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


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>

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");

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.