Pemilih data bootstrap bersembunyi setelah pemilihan


97

Bagaimana cara menyembunyikan kalender setelah tanggal dipilih? Apakah ada fungsi tertentu yang dapat saya gunakan? Kode saya di bawah ini:

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

Bantuan apa pun akan dihargai.


6
Mengapa ini bukan perilaku default pustaka?
olahraga

Jawaban:


156

Anda dapat menggunakan acara changedate()untuk melacak kapan tanggal diubah bersama dengan datepicker('hide')metode untuk menyembunyikan datepickersetelah membuat pilihan:

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

Demo

MEMPERBARUI

Ini adalah bug dengan autoclose: true. Bug ini telah diperbaiki di master terbaru. LIHAT COMMIT. Dapatkan kode terbaru dariGitHub


7
Saya akan merekomendasikan tambahan memeriksa apakah mode tampilan saat ini adalah 'hari': if (ev.viewMode === 'days') {$(this).datepicker('hide');}karena Anda mungkin tidak ingin menyembunyikan datepicker setelah memilih satu bulan atau satu tahun}
turan

1
Sepertinya tutup otomatis disetel ke false secara default ... $(".date").datepicker({... autoclose: true, ... });berfungsi dengan baik !!!
Dani

45

Jika ini membantu siapa pun, Versi 2.0 dari pemilih data bootstrap tidak lagi berfungsi dengan jawaban yang diterima.

Inilah cara saya membuatnya bekerja pada milik saya:

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

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


Ada versi 2? Saya melihat v1.6.4 sebagai rilis terbaru di Github
garryp

Gunakan penutup otomatis (lihat jawaban @ Salim atau jawaban yang diterima yang diperbarui) daripada menangani acara secara manual. Jika Anda menyembunyikan datepicker saat tanggal diubah, maka mencoba mengetik tanggal dapat menyebabkan perilaku yang tidak diinginkan.
Miring

35
$('#input').datepicker({autoclose:true});

4
Ini jawaban yang sempurna. Ini harus menjadi jawaban yang disetujui.
Sarower Jahan

3

Jika Anda ingin menimpa perilaku kalender secara umum, secara global, coba edit fungsi Datepicker (dalam contoh saya, baris 82),

dari

    this.autoclose = false;

untuk

    this.autoclose = true;

Berfungsi dengan baik untuk saya, karena saya ingin semua contoh kalender saya berperilaku sama.


2
Tidak perlu mengubah properti default di pustaka js. Anda bisa meneruskannya sebagai properti objek ke fungsi saat Anda memanggilnya. Contoh: $ ('# dob'). Datepicker ({format: 'dd / mm / yyyy', autoclose: true});
Zeeshan

3

Masalahnya bisa dihentikan, memblokir event hide untuk elemen input oleh bahasa ini:

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


Terima kasih sobat! saya marah karena masukan disembunyikan setelah pemilihan tanggal, dan ini menyelesaikan masalah saya. Bersulang !
spacebiker

3
  1. Cukup buka bootstrap-datepicker.js
  2. Temukan : var defaults = $.fn.datepicker.defaults
  3. set autoclose: true

Simpan dan segarkan proyek Anda dan ini harus dilakukan.


2

Dalam bootstrap 4 gunakan "autoHide: true"

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

Jawaban bagus Ankit
Shashank Singh

1

Tutup datetimepicker ketika tanggal pilih (datetimepicker menunjukkan tanggal dengan waktu)

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

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

0

Saya mendapat solusi yang tepat:

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

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

Jawaban lain untuk pertanyaan ini sama persis dengan jawaban Anda. OP juga memiliki ini autoclose: truedalam kode contoh mereka.
93196.93

0

Saya mengubah ke datetimepicker dan format ke 'DD / MM / YYYY'

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

0

Setidaknya dalam versi 2.2.3 bahwa saya menggunakan, Anda harus menggunakan autoClosebukan autoclose. Kasus surat penting.


0

Anda dapat mengubah kode sumber, bootstrap-datepicker.js . Tambahkan this.hide();suka 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

Memiliki masalah dengan jam yang masih muncul meskipun saya menulis format: 'YYYY-MM-DD' ,

Saya ingin mengatur pickTime: falsedan setelah perubahan-> sembunyikan saya harus fokus-> tunjukkan

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

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

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

0

Untuk pemilih waktu

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

0

Gunakan ini untuk datetimepicker, ini berfungsi dengan baik

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

0

Belum pernah melihat ini disebutkan, tapi inilah yang memperbaikinya untuk saya:

switchOnClick: true
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.