Bootstrap datepicker ซ่อนอยู่หลังการเลือก

ฉันจะซ่อนปฏิทินหลังจากเลือกวันที่ได้อย่างไร มีฟังก์ชันเฉพาะที่ฉันสามารถใช้ได้หรือไม่? รหัสของฉันด้านล่าง:

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

ความช่วยเหลือใด ๆ จะได้รับการชื่นชม

คุณสามารถใช้เหตุการณ์changedate()เพื่อติดตามว่าวันที่เปลี่ยนแปลงเมื่อใดพร้อมกับdatepicker('hide')วิธีการซ่อนdatepickerหลังจากทำการเลือก:

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

การสาธิต

อัปเดต

นี่คือข้อบกพร่องของautoclose: true. ข้อบกพร่องนี้ได้รับการแก้ไขในต้นแบบล่าสุด ดูCOMMIT. รับรหัสล่าสุดจากGitHub

หากเป็นความช่วยเหลือสำหรับใครก็ตาม bootstrap datepicker เวอร์ชัน 2.0 จะไม่ทำงานกับคำตอบที่ยอมรับอีกต่อไป

นี่คือวิธีที่ฉันทำให้มันทำงานกับฉัน:

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

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

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

หากคุณต้องการลบล้างพฤติกรรมของปฏิทินโดยทั่วไปทั่วโลกให้ลองแก้ไขฟังก์ชัน Datepicker (ในตัวอย่างของฉันคือบรรทัดที่ 82)

จาก

    this.autoclose = false;

ถึง

    this.autoclose = true;

ทำงานได้ดีสำหรับฉันเพราะฉันต้องการให้อินสแตนซ์ปฏิทินของฉันทำงานเหมือนเดิม

ปัญหาสามารถหยุดได้โดยปิดกั้นเหตุการณ์ซ่อนสำหรับองค์ประกอบอินพุตโดยภาษาลิเนสนี้:

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

1. เพียงแค่เปิดไฟล์ bootstrap-datepicker.js
2. ค้นหา: var defaults = $.fn.datepicker.defaults
3. ชุด autoclose: true

บันทึกและรีเฟรชโครงการของคุณสิ่งนี้ควรทำ

ใน bootstrap 4 ให้ใช้ "autoHide: true"

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

ปิด datetimepicker เมื่อเลือกวันที่ (วันที่แสดง datetimepicker พร้อมเวลา)

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

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

ฉันมีทางออกที่สมบูรณ์แบบ:

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

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

ฉันเปลี่ยนเป็นdatetimepickerและฟอร์แมตเป็น'DD / MM / YYYY'

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

อย่างน้อยในเวอร์ชัน 2.2.3 ที่ฉันใช้คุณต้องใช้autoCloseแทนautocloseไฟล์. กรณีจดหมายมีความสำคัญ

คุณสามารถเปลี่ยนรหัสแหล่งที่มาบูต-datepicker.js เพิ่มthis.hide();เช่น 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
 }

มีปัญหากับนาฬิกายังคงแสดงแม้ว่าฉันจะเขียนรูปแบบ: 'YYYY-MM-DD' ,

ฉันต้องตั้งค่าpickTime: falseและหลังจากเปลี่ยน -> ซ่อนฉันต้องโฟกัส -> แสดง

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

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

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

สำหรับตัวเลือกวันที่และเวลา

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

ใช้สิ่งนี้สำหรับ datetimepicker ก็ใช้ได้ดี

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

ยังไม่เห็นสิ่งนี้กล่าวถึง แต่นี่คือสิ่งที่แก้ไขสำหรับฉัน:

switchOnClick: true