Seletor de data bootstrap ocultar após seleção


97

Como oculto o calendário após a seleção de uma data? Existe uma função específica que posso usar? Meu código abaixo:

$('#dp1').datepicker({
    format: 'mm-dd-yyyy',
    startDate: '-15d',
    autoclose: true,
    endDate: '+0d' // there's no convenient "right now" notation yet
});

Qualquer ajuda seria apreciada.


6
Por que este não é o comportamento padrão da biblioteca?
esportes de

Respostas:


156

Você pode usar o evento changedate()para controlar quando a data é alterada junto com o datepicker('hide')método para ocultar o datepickerapós fazer a seleção:

$('yourpickerid').on('changeDate', function(ev){
    $(this).datepicker('hide');
});

Demo

ATUALIZAR

Esse era o bug com autoclose: true. Este bug foi corrigido no último mestre. Veja as COMMIT. Obtenha o código mais recente deGitHub


7
Eu recomendaria verificar adicionalmente se o modo de visualização atual é 'dias': if (ev.viewMode === 'days') {$(this).datepicker('hide');}já que você provavelmente não deseja ocultar o selecionador de data após selecionar um mês ou ano}
turan

1
Parece que autoclose está definido como falso por padrão ... $(".date").datepicker({... autoclose: true, ... });funciona bem !!!
Dani

45

Se for de alguma ajuda para alguém, a versão 2.0 do bootstrap datepicker não funciona mais com a resposta aceita.

Veja como fiz isso funcionar no meu:

$('yourpickerid').datepicker({
    format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
    $(this).datepicker('hide');
});

Consulte http://bootstrap-datepicker.readthedocs.org/en/latest/events.html#changedate


Existe uma versão 2? Vejo a v1.6.4 como a versão mais recente no Github
garryp

Use autoclose (veja a resposta de @Salim ou a resposta aceita atualizada) em vez de lidar com o evento manualmente. Se você ocultar o selecionador de data quando a data for alterada, tentar digitar a data pode causar um comportamento indesejado.
Desequilibrado em


3

Se você deseja substituir o comportamento do calendário em geral, globalmente, tente editar a função Datepicker (no meu exemplo, era a linha 82),

de

    this.autoclose = false;

para

    this.autoclose = true;

Funcionou bem para mim, pois eu queria que todas as minhas instâncias de calendário se comportassem da mesma forma.


2
Não há necessidade de alterar as propriedades padrão na biblioteca js. Você pode passá-lo como uma propriedade do objeto para a função ao chamá-lo. Exemplo: $ ('# dob'). Datepicker ({format: 'dd / mm / aaaa', autoclose: true});
Zeeshan

3

O problema pode ser interrompido, bloqueando o evento de ocultar para o elemento de entrada por esta linha:

var your_options = { ... };
$('.datetimepicker').datetimepicker(your_options).on('hide', function (e) {
    e.preventDefault();
    e.stopPropagation();
});


Obrigado cara! Eu estava ficando bravo porque a entrada ficou oculta após a seleção da data, e isso resolveu meu problema. Felicidades !
astronauta de

3
  1. Basta abrir o bootstrap-datepicker.js
  2. encontrar : var defaults = $.fn.datepicker.defaults
  3. conjunto autoclose: true

Salve e atualize seu projeto e isso deve servir.


2

No bootstrap 4, use "autoHide: true"

$('#datepicker1').datepicker({
    autoHide: true,
    format: 'mm-yyyy',
    endDate: new Date()
});

Boa resposta Ankit
Shashank Singh

1

Fechar datetimepicker quando selecionar data (datetimepicker mostra data com hora)

$('.datepicker').datepicker({
    autoclose: true,
    closeOnDateSelect: true
}); 

1
$('yourpickerid').datetimepicker({
           pickTime: false
}).on('changeDate', function (e) {
           $(this).datetimepicker('hide');
});

0

Eu tenho uma solução perfeita:

$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
    if(e.viewMode === 'days')
        $(this).blur();
});

0
$('.datepicker').datepicker({
    autoclose: true
}); 

Outra resposta a esta pergunta é exatamente a mesma que a sua. OP também tem isso autoclose: trueem seu código de exemplo.
93196.93

0

Mudei para datetimepicker e formato para 'DD / MM / AAAA'

$("id").datetimepicker({
    format: 'DD/MM/YYYY',
}).on('changeDate', function() {
    $('.datepicker').hide();
});

0

Pelo menos na versão 2.2.3 que estou usando, você deve usar em autoClosevez de autoclose. O caso da carta é importante.


0

Você pode alterar o código-fonte, bootstrap-datepicker.js . Adicionar this.hide();como ne

  if (this.viewMode !== 0) {
    this.date = new Date(this.viewDate);
    this.element.trigger({
        type: 'changeDate',
        date: this.date,
        viewMode: DPGlobal.modes[this.viewMode].clsName
    });
    this.hide();//here
 }

0

Tendo problemas com o relógio ainda mostrando mesmo se eu escrever o formato: 'AAAA-MM-DD' ,

Desejo definir pickTime: falsee após a mudança-> ocultar, devo focar- > mostrar

$('#VBS_RequiredDeliveryDate').datetimepicker({
  format: 'YYYY-MM-DD',
  pickTime: false
});

$('#VBS_RequiredDeliveryDate').on('change', function(){
    $('.datepicker').hide();
});

$('#VBS_RequiredDeliveryDate').on('focus', function(){
    $('.datepicker').show();
});

0

Para selecionador de data e hora

$('yourpickerid').datetimepicker({
        format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
        $(this).datetimepicker('hide');
});

0

Use para datetimepicker, funciona bem

$('#Date').data("DateTimePicker").hide();

0

Não vi isso mencionado, mas foi isso que consertou para mim:

switchOnClick: true
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.