AutoClose not working

[leandrozapata]

Hi, i use the autoclose method but this not working in Chrome: js:

        $(document).ready(function () {                                  
            $('.datepicker').datepicker({
                format: "dd/mm/yyyy",
                autoclose: true
            });

        });        

html:

<input class="datepicker valid" data-val="true" data-val-date="El campo Vencimiento debe ser una fecha." id="FirstMaturiy" name="FirstMaturiy" readonly="readonly" type="text" value="">

Thanks for your help.

[eternicode]

Works for me: http://jsfiddle.net/cKYg4/

What version of jquery? Do you get any errors in the console?

[leandrozapata]

I use the 1.10.1 version now. But I have the same behavior (The calendar not close on lost focus or select date) with the version 1.7.10.1

I not have errors in console.

Your example in jsfiddle.net don't work. Only see a input disabled. I use Chrome with the version 27.0.1453.110 m.

I have the folowing code in document ready:

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

with the changeDate event I force the close Calendar on select date. If not use the changeDate, te calendar not close.

Thanks for your help

[nylen]

I think I had this issue when I did not include the datepicker.css stylesheet in the page correctly. Try that.

[cristiandreica]

I have the same issue on Chrome (27.0.1453.110). The CSS is properly included. Also, the example on jsfiddle doesn't work. I get the disabled input as well.

[leandrozapata]

The style is included corrrectly:

The calendar show well but the only thing that not work is the autoclose property.

[eternicode]

Your example in jsfiddle.net don't work.

Ah, seems Chrome 27 has added mimetype checking -- raw.github.com sends files with a text/plain mimetype, so Chrome now "refuses to execute" them as js.

As for your issue, #494 also had a problem with using format and autoclose together -- I can't replicate the problem, though.

[eternicode]

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

You've got a trailing comma after the autoclose line -- this will cause problems in some browsers (and you should remove it :wink:), but Chrome seems to handle it fine.

[cristiandreica]

In my case, the datepicker is inline. I think the 'hide' option is to be used only on floating popovers.

[leandrozapata]

I remove the comma after the autclose line but i have the same error. Do you have access to my application page?

[eternicode]

@cristiandreica that's correct, autoclose shouldn't have any effect on inline datepickers.

@leandrozapata can you provide a url to your app that has the problem?

[leandrozapata]

I send the access to gmail account.

[eternicode]

Worked it out over email, the issue was that @leandrozapata was using the eyecon.ro download (which doesn't support a lot of the features)

[DevanB]

I seem to be having the same issue. I've downloaded the actual master from this repository, but still no luck. Is there another download I should be using?

[leandrozapata]

Yes, donwload from github directly.

Regards!

On Thu, Sep 26, 2013 at 1:06 PM, Devan Beitel notifications@github.comwrote:

I seem to be having the same issue. I've downloaded the actual master from this repository, but still no luck. Is there another download I should be using?

— Reply to this email directly or view it on GitHubhttps://github.com/eternicode/bootstrap-datepicker/issues/500#issuecomment-25180440 .

[DevanB]

Interesting. autoclose still doesn't work for me when I use the master download from this repository. It seems that no parameters I specify beside format are working.

$(document).ready(function(){ var today = new Date(); $('.datepicker').datepicker({ format: "mm-dd-yyyy", autoclose: true, startDate: today }); });

UPDATE:

I got this to work by editing the actual bootstrap-datepicker.js file to make startDate today and autoclose true. Not sure why those parameters were not being updated.

[mrfatboy]

I'm having the same problem. Download the master from github. autoclose, startDate, todayHighlight are not working for me. Those are the only ones I tried. Where did you actually edit the bootstrap-datepicker.js file? I'm using Bootstrap 3 and jquery 1.9.1

UPDATE: I did the same as #DevanB by editing the bootstrap-picker.js file. I inserted the following lines of code at line 41. The 'options' parameter is not reflecting the options actually being sent. I'm a beginner at javascript so I dont' know why. Any help would be appreciated. thanks

    options['autoclose'] = true;
    options['todayHighlight'] = true;

[DevanB]

If you actually search in the bootstrap-date picker.js file for the defaults (at the bottom of the file) you will see them and can change them.

Sent from my iPhone

On Sep 26, 2013, at 17:01, mrfatboy notifications@github.com wrote:

I'm having the same problem. Download the master from github. autoclose, startDate, todayHighlight are not working for me. Those are the only ones I tried. Where did you actually edit the bootstrap-datepicker.js file?

— Reply to this email directly or view it on GitHub.

[mrfatboy]

OK. I see that now. thanks. However, i really need to dynamically change this options. I hope the developer fixes this. I'll try to poke around but as I said I'm a noob at JS.

I guess the defaults are overriding the options.

[tienn2t]

thank you, that worked for me $('.datepicker').datepicker().on('changeDate', function (ev) { $(this).datepicker('hide'); });;

[Jarvizx]

or try

$('.datepicker').datepicker().on('changeDate', function(e){
        (e.viewMode=='days') ? $(this).datepicker('hide') : '';
});

[ashwini162606]

hello , i am using datepicker i want focus on text box after selecting date may any one help me

[auroralabs]

Hi, Is their a facility to split the date into 3 parts Day, Month Year? ie similar to

onSelect: function(dateText, inst) { var pieces = dateText.split('/'); $('#day').val(pieces[0]); $('#month').val(pieces[1]); $('#year').val(pieces[2]); }

[thearyoun]

I use autoclose; true for datetimepicker in bootstrap 2.3.2 it doesn't work. how to solve it.

[ashwini162606]

if you are using html 5 than you can use (data-date-autoclose="true" ) for auto closing other-wise you can use autoclose: true in your datepicker directive.

On Fri, Jun 27, 2014 at 2:40 PM, thearyoun notifications@github.com wrote:

I use autoclose; true for datetimepicker in bootstrap 2.3.2 it doesn't work. how to solve it.

— Reply to this email directly or view it on GitHub https://github.com/eternicode/bootstrap-datepicker/issues/500#issuecomment-47323025 .

[homoeoplus]

I was able to autoclose on click by using changeDate event.

[alvarotrigo]

I had to change the default values for autoClose in the bootstrap-datepicker.js file. I wonder why this issue is closed when the problem still out there.

[lukad]

I'm having trouble with autoclose as well. I have to use the changeDate event.

[FlanTech]

Don't use class="datepicker" on your input or it will ignore any options you pass. Just do something like

<input class="datepickerx" type="text" /> and then $(".datepickerx").datepicker({ autoclose: true });

[pacificcoders]

Old thread but problem seems to still persist. Fix: Need quotes around "true", make autoclose is all lowercase but startDate is camelcase. This should work with latest version: $('.input-group.date').datepicker({ format: "yyyy-mm-dd", autoclose: "true", startDate: "today" }).on('changeDate', function(e) { //do something });

[clintgh]

I don't think this is compatible to touch events. Mine is not working and is related to a plugin called "Touche.js" which converts click event to touch. When I comment out the touche.js then it worked fine

[leomedeiros]

Changing the class name, as suggested by FlanTech solved the problem of autoclose for me.

[cezco]

i have a solved for this case, download Datepicker for Bootstrap v1.4.0 (https://github.com/eternicode/bootstrap-datepicker)

Modify in your .js files :

• Change the bootstrap-datepicker.js (changed all autoclose, set it to true) var defaults = $.fn.datepicker.defaults = { autoclose: true, todayBtn: true,....
• bootstrap-datepicker.min.js (changed autoclose, set it to 1) var n=a.fn.datepicker.defaults={autoclose:1,beforeShowDay:a.noop,beforeShowMonth:a.noop,.....

put this in your code project:

• if you are using "bootstrap-datepicker.js" :

var datepicker = $.fn.datepicker.noConflict();
$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$.fn.bootstrapDP = datepicker;
$('.datepicker').datepicker({ autoclose: true, todayHighlight: true });

• if you are using "bootstrap-datepicker.min.js" :

var datepicker = $.fn.datepicker.noConflict();
$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$.fn.bootstrapDP = datepicker;
$('.datepicker').datepicker({ autoclose: 1, todayHighlight: 1 });

this for the input type : `

` i hope this is can help you

regards, Herry

[acrobat]

@cezco can you provide a jsfiddle to show what the problem exactly is? (you can use this jsfiddle as a start)

Then we can try to come up with a fix in the datepicker itself

[xedemx]

@acrobat

Maybe the problem is how the markup is being set up? updated your jsfiddle here in a lame way (I am new to this), but the first example uses data-provide on the div, while the second is with an id on the input.

[m4gnetar]

I added the following line

this.hide();

at the end of the "click" function (line 254 of boostrap-datepicker.js file) and it has worked: case 'td': {... .... this.hide(); } break;

[jduelferOmega]

mine worked by overriding the default for all datepickers:

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

But I didn't need it different for each individual datepicker, I wanted them all to autoclose.

[podisto]

Edit the file bootstrap-datepicker.js and add change directly this line of code

autoclose: true, // default false line 1720

[pienisieni]

autoclose stops working if jquery library is loaded twice -- at least that was the problem for me.

[TomaszWaszczyk]

How to solve the issue in case having AngularJS 1.2 application?

<datetimepicker class="datepickerx" data-ng-model="events.filter.state.dateFrom" data-datetimepicker-config="{ minView: 'day' }" data-date-autoclose="true" />

Does not work ;/

[dimsis]

I've solved it by removing the data-provide="datepicker" from the outter div. After that autoclose worked and even the todayHighlight:true start working too.

[ulissesas]

For me it worked by changing the autoClose property to autoHide I'm using version https://cdnjs.com/libraries/datepicker/1.0.10