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.