How to auto hide bootstrap date-picker after selecting date?


I am using Bootstrap datepicker in my web-application, but once I have selected date, date-picker is not hiding, how can I auto-hide date-picker once date is selected? Here is the date-picker Javascript code, which I am  using

     <link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet" />
 <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

       $('.datepicker').datepicker({
                format: 'mm/dd/yyyy'

            });

Asked by:- neena
1
: 6781 At:- 7/25/2020 9:25:10 AM
Bootstrap bootstrap date-picker auto-hide-once-selected







2 Answers
profileImage Answered by:- vikas_jk

You can simply use "autoclose:true" property of bootstrap date picker, to close it after selection, here is an example

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

OR

If you want to close it on date changed event call, you can do it as below

$('.datepicker').on('changeDate', function(event){
    $(this).datepicker('hide');
});
1
At:- 7/31/2020 12:56:09 PM


profileImage Answered by:- pika

For bootstrap datepicker, you can auto-hide datepicker as below

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

Auto-hide datepicker for jQuery Datepicker, use the below code

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

Thanks

0
At:- 1/24/2022 9:25:44 AM






Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use