Bootstrap tarih seçici seçimden sonra gizle


97

Bir tarih seçildikten sonra takvimi nasıl gizlerim? Kullanabileceğim belirli bir işlev var mı? Aşağıdaki kodum:

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

Herhangi bir yardım memnuniyetle karşılanacaktır.


6
Bu neden kütüphanenin varsayılan davranışı değil?
spor

Yanıtlar:


156

Seçimi yaptıktan sonra gizleme yöntemiyle changedate()birlikte tarihin ne zaman değiştirildiğini takip etmek için olayı kullanabilirsiniz :datepicker('hide')datepicker

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

Demo

GÜNCELLEME

Bu, ile hataydı autoclose: true. Bu hata en son ana sürümde düzeltildi. GÖRMEK COMMIT. En son kodu şuradan alın:GitHub


7
Ek olarak, mevcut görünüm modunun 'günler' olup olmadığını kontrol if (ev.viewMode === 'days') {$(this).datepicker('hide');}etmenizi tavsiye ederim: muhtemelen bir ay veya yıl seçtikten sonra tarih seçiciyi gizlemek istemezsiniz}
turan

1
Görünüşe göre autoclose varsayılan olarak false değerine ayarlanmış ... iyi $(".date").datepicker({... autoclose: true, ... });çalışıyor !!!
Dani

45

Herhangi birine yardımcı olacaksa, önyükleme tarih seçicisinin Sürüm 2.0'ı artık kabul edilen yanıtla çalışmaz.

İşte benimki üzerinde nasıl çalıştırdım:

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

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


2. versiyon mu var? V1.6.4'ü Github'daki en son sürüm olarak görüyorum
garryp

Olayı manuel olarak işlemek yerine otomatik kapat (bkz. @ Salim'in cevabı veya güncellenmiş kabul edilmiş cevap) kullanın. Tarih değiştirildiğinde tarih seçiciyi gizlerseniz, tarihi yazmaya çalışmak istenmeyen davranışlara neden olabilir.
Lopsided


3

Genel olarak takvimin davranışını genel olarak geçersiz kılmak istiyorsanız Datepicker işlevini düzenlemeyi deneyin (benim örneğimde bu satır 82 idi),

itibaren

    this.autoclose = false;

-e

    this.autoclose = true;

Tüm takvim örneklerimin aynı şekilde davranmasını istediğim için benim için iyi çalıştı.


2
Js kitaplığındaki varsayılan özellikleri değiştirmeye gerek yoktur. Onu çağırdığınızda, fonksiyona nesnenin bir özelliği olarak iletebilirsiniz. Örnek: $ ['# dob']. Datepicker ({format: 'gg / aa / yyyy', otoklose: true});
Zeeshan

3

Girdi öğesi için hide olayı şu satırla engellenerek sorun durdurulabilir:

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


Teşekkürler dostum ! Deliriyordum çünkü giriş tarih seçiminden sonra gizlendi ve bu benim sorunumu çözdü. Şerefe!
spacebiker

3
  1. Basitçe açın bootstrap-datepicker.js
  2. bul: var defaults = $.fn.datepicker.defaults
  3. Ayarlamak autoclose: true

Projenizi kaydedin ve yenileyin ve bu yapmalıdır.


2

Bootstrap 4'te "autoHide: true" kullanın

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

Güzel cevap Ankit
Shashank Singh

1

Tarih seçildiğinde datetimepicker'ı kapat (datetimepicker, tarihi saatle gösterir)

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

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

0

Mükemmel bir çözüm buldum:

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

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

Bu sorunun bir başka cevabı da sizinkiyle tamamen aynı. OP'nin autoclose: trueörnek kodunda da vardır .
93196.93

0

Ben değiştirildi datetimepicker ve biçimi 'GG / AA / YYYY'

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

0

En azından benim kullandığım 2.2.3 sürümünde, autoClosebunun yerine kullanmalısınız autoclose. Mektup durumu önemlidir.


0

Kaynak kodunu, bootstrap-datepicker.js'yi değiştirebilirsiniz . this.hide();Ne gibi ekle

  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

"YYYY-AA-GG" biçimini yazsam bile saatle ilgili sorun yaşıyorum ,

Ayarlamak zorunda kaldım pickTime: falseve değişiklikten sonra - > gizle , odaklanmak zorunda kaldım - > göster

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

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

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

0

Tarih saat seçici için

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

0

Bunu datetimepicker için kullanın, iyi çalışıyor

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

0

Bundan bahsedildiğini görmedim, ama benim için sorunu çözen şey buydu:

switchOnClick: true
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.