Bootstrap datepicker not close automatically after picking a date

bootstrap datepicker close event
bootstrap datepicker highlight dates
jquery datepicker not closing after select in ie
bootstrap-datepicker start date end date example
bootstrap datepicker clear button
bootstrap datepicker default date
bootstrap 4 datepicker
bootstrap datepicker mindate

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.

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

jQuery Datepicker close datepicker after selected date, way is to use the on change property thats fired by the input when selecting a Date. Binding a mouseup event to the document state may not be the best idea EDIT: December 2018 Obviously Bootstrap-Datepicker doesnt work with  I would like the date picker to close immediately after the user selected a date and not require her to click on the close button. Auto close the DatePicker after

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

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

AutoClose not working · Issue #500 · uxsolutions/bootstrap-datepicker, Hi, i use the autoclose method but this not working in Chrome: js: $(document).​ready(function Datepicker doesn't hide after selecting date #236 auto closing other-wise you can use autoclose: true in your datepicker The Datepicker's config object got "closeAfterSelect" field. Set it to closeAfterSelect: true, and your date picker will be closed after selecting the date. Please check also our Datepicker Docs .

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;

Options - bootstrap-datepicker, Default: false. Whether or not to close the datepicker immediately when a date is selected. If true, selecting a year or month in the datepicker will update the input value immediately. Otherwise “auto” triggers “smart orientation” of the picker. It should close automatically by default as explained here. However, if there is a time component to your picker, it won't close automatically. However, if there is a time component to your picker, it won't close automatically.

Try this:

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

Auto close the DatePicker after picking a date, Whether or not to close the datepicker immediately when a date is selected. If true, selecting the currently active date in the datepicker will unset the will default to “auto”), “right” (vertical orientation will default to “auto”), “auto top”. Allows for  I want to select only date not datetime is their any way that datetime picker automatically close after selecting the date. here is my code $(".jq_datepicker").datetimepicker({format: 'yyyy-mm-dd',autoclose: true});

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.

Bootstrap datepicker not close automatically after picking a date, I would like the date picker to close immediately after the user selected a date and not require her to click on the close button. How can I do that? Datepicker doesn't hide after selecting date #236. geaden opened this issue Oct 29, 2012 · 13 comments. When I select date datepicker is still on my screen, when I click anywhere on page it disappears.

Bootstrap datepicker hide issue, 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. If you hide the datepicker when the date is changed, then attempting to type in the date can cause unwanted behavior. – Lopsided Aug 17 '17 at 17:43 add a comment |

DateTime Picker · Bootstrap, Dear All, I have a Bootstrap datepicker inside a bootstrap modal. orientation: "​bottom auto", format: 'm/d/yyyy', startDate: "01/01/2019", container: I only want the datepicker to close when I select a date in the datepicker function to check if the textbox has value and then set focus to it to let it not close. changing the core-file will autoclose all datepickers that you use from this core. so you have to tell the other datepickers to not close when you want to have them keept open. Telling the datepicker to autoclose is more recommended. One (and the main) reason for this is what Javid pointed out.

Bootstrap Datetimepicker, Bootstrap DateTime Picker is a bootstrap twitter component. Whether or not to close the datetimepicker immediately when a date is If true or "linked", displays a "Today" button at the bottom of the datetimepicker to select the current date. Popup datepicker with custom date picking function closes automatically after value select even with preventing event from propagation etc. I think there should be an option to prevent closing datepicker on date select (e.g. if I want to implement range datepicker in popup its problematic). Link to minimally-working plunker that reproduces the

Comments
  • You should probably tell what plugin you're using? Is this it -> eyecon.ro/bootstrap-datepicker
  • I got it from GitHub yesterday :)
  • github link was helpful
  • autoclose was what I was looking for, might update this with .datepicker({ autoclose: true });
  • I have seen several behavior when having this options, in which the last option has a comma at the end, I have always thought this is not necessary specially in the last option. Do you know why this happens? Should it always have a semi comma at the end? In which cases this doesn't apply?
  • Are there any additional details you can share to make your answer more useful.
  • Have in mind that answers containing only code are not considered complete.
  • When you hover over the div with the class defaultdatepicker.
  • Please format properly and justify your answer. Check How to write an answer. Add more details to justify your answer.