Bootstrap Datepicker ukrywa się po zaznaczeniu

97

Jak ukryć kalendarz po wybraniu daty? Czy jest jakaś konkretna funkcja, której mogę użyć? Mój kod poniżej:

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

Każda pomoc będzie mile widziana.

jheul
źródło
6
Dlaczego nie jest to domyślne zachowanie biblioteki?
sport

Odpowiedzi:

156

Możesz użyć zdarzenia changedate()do śledzenia zmiany daty oraz datepicker('hide')metody ukrycia datepickerpo dokonaniu wyboru:

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

Próbny

AKTUALIZACJA

To był błąd z autoclose: true. Ten błąd został naprawiony w najnowszej wersji master. ZOBACZ COMMIT. Pobierz najnowszy kod zGitHub

Felix
źródło
7
if (ev.viewMode === 'days') {$(this).datepicker('hide');}
Poleciłbym
1
Wygląda na to, że autoclose jest domyślnie ustawione na false ... $(".date").datepicker({... autoclose: true, ... });działa dobrze !!!
Dani
45

Jeśli komuś może to pomóc, wersja 2.0 narzędzia do wybierania daty ładowania początkowego nie działa już z zaakceptowaną odpowiedzią.

Oto jak to działa na moim:

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

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

Ola
źródło
Jest wersja 2? Widzę wersję
1.6.4
Użyj autoclose (zobacz odpowiedź @ Salim lub zaktualizowaną zaakceptowaną odpowiedź) zamiast obsługiwać zdarzenie ręcznie. Jeśli ukryjesz DatePicker, gdy data zostanie zmieniona, próba wpisania daty może spowodować niepożądane zachowanie.
Krzywo
35
$('#input').datepicker({autoclose:true});
MaxEcho
źródło
4
To doskonała odpowiedź. To powinna być zatwierdzona odpowiedź.
Sarower Jahan
3

Jeśli chcesz zmienić ogólne zachowanie kalendarza, spróbuj edytować funkcję Datepicker (w moim przykładzie była to linia 82),

z

    this.autoclose = false;

do

    this.autoclose = true;

U mnie działało dobrze, ponieważ chciałem, aby wszystkie wystąpienia kalendarza zachowywały się tak samo.

user3674664
źródło
2
Nie ma potrzeby zmiany domyślnych właściwości w bibliotece js. Możesz przekazać ją jako właściwość obiektu do funkcji, gdy ją wywołasz. Przykład: $ ('# dob'). Datepicker ({format: 'dd / mm / rrrr', autoclose: true});
Zeeshan
3

Problem można zatrzymać, blokując zdarzenie hide dla elementu input za pomocą tego języka:

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

papacho
źródło
Dzięki stary ! Wściekałem się, ponieważ dane wejściowe zostały ukryte po wybraniu daty, a to rozwiązało mój problem. Twoje zdrowie !
Spacebiker
3
  1. Po prostu otwórz bootstrap-datepicker.js
  2. odnaleźć : var defaults = $.fn.datepicker.defaults
  3. zestaw autoclose: true

Zapisz i odśwież swój projekt i to powinno wystarczyć.

user3615318
źródło
2

W bootstrap 4 użyj "autoHide: true"

$('#datepicker1').datepicker({
    autoHide: true,
    format: 'mm-yyyy',
    endDate: new Date()
});
Ankit24007
źródło
Dobra odpowiedź Ankit
Shashank Singh
1

Zamknij datetimepicker po wybraniu daty (datetimepicker pokazuje datę i godzinę)

$('.datepicker').datepicker({
    autoclose: true,
    closeOnDateSelect: true
}); 
Gosha
źródło
1
$('yourpickerid').datetimepicker({
           pickTime: false
}).on('changeDate', function (e) {
           $(this).datetimepicker('hide');
});
mirmo
źródło
0

Mam idealne rozwiązanie:

$('#Date_of_Birth').datepicker().on('changeDate', function (e) {
    if(e.viewMode === 'days')
        $(this).blur();
});
Gordon Ma
źródło
0
$('.datepicker').datepicker({
    autoclose: true
}); 
user3706926
źródło
Inna odpowiedź na to pytanie jest dokładnie taka sama jak twoja. OP również ma to autoclose: truew swoim przykładowym kodzie.
93196,93
0

Zmieniłem na datetimepicker i format na „DD / MM / RRRR”

$("id").datetimepicker({
    format: 'DD/MM/YYYY',
}).on('changeDate', function() {
    $('.datepicker').hide();
});
Sorter
źródło
0

Przynajmniej w wersji 2.2.3, której używam, musisz użyć autoClosezamiast autoclose. Sprawa listu ma znaczenie.

TimA
źródło
0

Możesz zmienić kod źródłowy, bootstrap-datepicker.js . Dodaj this.hide();jak 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
 }
Vladimir Kulakov
źródło
0

Mam problem z wyświetlaniem zegara, nawet jeśli napisałem format: „RRRR-MM-DD” ,

Muszę ustawić pickTime: falsei po zmianie-> ukryć muszę skupić się-> pokazać

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

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

$('#VBS_RequiredDeliveryDate').on('focus', function(){
    $('.datepicker').show();
});
dyrwoolf
źródło
0

W przypadku selektora datetime

$('yourpickerid').datetimepicker({
        format: 'dd/mm/yyyy',
}).on('changeDate', function(e){
        $(this).datetimepicker('hide');
});
srinivas gowda
źródło
0

Użyj tego dla datetimepicker, działa dobrze

$('#Date').data("DateTimePicker").hide();
sugumar
źródło
0

Nie widziałem tego wspomnianego, ale to naprawiło to dla mnie:

switchOnClick: true
edrakali
źródło