CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapdatepicker
AlliceSmash
AlliceSmash

Reputation: 727

Bootstrap datepicker not close automatically after picking a date

I use the latest Bootstrap datepicker.js. All works fine except that when I pick a date from the drop down, it does not automatically close it. I searched web and tried to use the following function in my javascript like the following: 

 $('#selectDate').datepicker({
    autoclose: true
}).on('changeDate', function (ev) {
    (ev.viewMode == 'days') ? $(this).datepicker('hide') : '';      
});

but when i use Google Chrome Dev tools, I realized that ev.viewmode was undefined. I am not sure how to move forward.

Upvotes: 28

Views: 101990

Answers (13)

premod suraweera
premod suraweera

Reputation: 49

 $('#from_date').datepicker({
            format: 'mm/dd/yyyy',
            autoclose: true,
            todayHighlight: true
        }).datepicker('setDate', new Date())
        .on('changeDate', function() {
            $(this).datepicker('hide');
 });

Upvotes: 1

reshanpubudu
reshanpubudu

Reputation: 79

Try this. It's work for me.

<input data-auto-close="true" type="text" class="datepicker-here"/>

Upvotes: 0

Aniket Bhansali
Aniket Bhansali

Reputation: 630

If you have multiple textboxes for which you have applied datepicker, then old solution might cause problem, Please try this instead,

$('.datepicker').datepicker({
     format: "dd/mm/yyyy",
     autoclose: true,
}).on('changeDate', function (ev) {
     $(this).datepicker('hide');
});

Look out this, https://github.com/eternicode/bootstrap-datepicker/issues/500

Note: Do not forget, we are using class selector of jquery, so you need to apply datepicker class to your textbox.

Upvotes: 11

Muzammil Hussain
Muzammil Hussain

Reputation: 221

This is working for me.

$(".date-picker").datepicker( {
    format: "yyyy-mm-dd",
}).on('change', function (ev) {
    $(this).datepicker('hide');
});

Upvotes: 2

Tumelo Moropane
Tumelo Moropane

Reputation: 1

When you hover over the div with the class defaultdatepicker. The calendar control will appear. On Mouseleave it will dissapear.

 $(document).on("focus", ".defaultdatepicker", function () {

        $(this).datepicker({
            format: 'dd/mm/yyyy',
            todayHighlight: 'TRUE',
            autoClose: true,
        });

        $('#datepicker').css({ "opacity": "1" });
    });

    $('.defaultdatepicker').on('mouseleave', function () {
        $('.datepicker').fadeOut(function () {
            $('.formattedStartDate').attr('class', 'formattedStartDate');

            $('#datepicker').css({ "opacity": "0" });
        });
    });

Upvotes: 0

amit badala
amit badala

Reputation: 11

This worked for me 

$(".date-picker").change(function() { 
    setTimeout(function() {
        $(".date-picker").datepicker('hide'); 
        $(".date-picker").blur();
    }, 50);
});

Upvotes: -1

Nick Verheijen
Nick Verheijen

Reputation: 229

For me it turned out to be a typo in the bootstrap-datepicker documentation. Instead of "autoclose: true", it's "autoClose: true".

Hope it helps.

Upvotes: 1

doshi smit
doshi smit

Reputation: 29

//10000% work Go to the bootstrap-datepicker.js file

Search for this:

'mousedown touchstart': $.proxy(function(e){
                    // Clicked outside the datepicker, hide it
                    if (!(
                        this.element.is(e.target) ||
                        this.element.find(e.target).length ||
                        this.picker.is(e.target) ||
                        this.picker.find(e.target).length
                    )) {
                        this.hide();  //remove this
                    }
                }, this)
            }]
        ];
    },

Upvotes: 0

user3615318
user3615318

Reputation: 125

  1. Simply open the bootstrap-datepicker.js
  2. find : var defaults = $.fn.datepicker.defaults (Line 1391 in my case)
  3. set autoclose: true

Save and refresh your project and this should do.

Upvotes: 3

northernman
northernman

Reputation: 1446

None of the above worked for me, however overriding the datepicker default option worked like a charm, and is a one-liner:

$.fn.datepicker.defaults.autoclose = true;

Upvotes: 12

Chaitanya K
Chaitanya K

Reputation: 1852

I added autoclose: true, (with semi comma at the end and it works)

 $('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight:'TRUE',
    autoclose: true,
})

Upvotes: 26

Ibrohim Ermatov
Ibrohim Ermatov

Reputation: 2259

Try this:

$('#selectDate').datepicker().on('changeDate', function(ev)
{                 
     $('.datepicker').hide();
});

Upvotes: 9

Mukesh Chapagain
Mukesh Chapagain

Reputation: 26016

Try this:

$('#selectDate').datepicker()
.on('changeDate', function(ev){                 
    $('#selectDate').datepicker('hide');
});

Update:

autoclose works fine when you use the updated version of datepicker present on github:

https://github.com/eternicode/bootstrap-datepicker

Upvotes: 22

Related Questions