Twitter datepicker drop down menu

Question

I want to add datepicker in the dropdown menu. I use this datepicker link

Then I added the code so as not to close the menu, when I click on the inputs, select the date, the input disappears. How can i fix this?

$('.datepicker').datepicker({ autoclose: true }); $('.dropdown-toggle').dropdown(); $('.jsolr-search-result-form .dropdown input, .jsolr-search-result-form .dropdown label, .jsolr-search-result-form ul span').click(function(e) { e.stopPropagation(); }); 

Answer 1

you can do the following:

 jQuery(function($){ $('#dropdownMenu1').parent().on('hide.bs.dropdown', function(e){ e.preventDefault(); }); }); 

Example: http://jsfiddle.net/9qyf2/

Note that dropdown events are fired on the parent element. From there, you can check which item was clicked and prevent the default behavior if it is interrupted. Be sure to check the documentation for downloading js components: http://getbootstrap.com/javascript/#dropdowns-usage

Hope this helps.

Answer 2

It was very troublesome. I also have a couple of date pickers located in some of the Bootstrap drop-down menus. I solved this in two ways.

The first uses jQuery to stop the event from bubbling once upon pressing the DatePicker button

 $('.yourDatePicker').on('hide', function(event) { event.stopPropagation(); $(this).closest('.yourDropDown').one('hide.bs.dropdown', function(ev) { return false; }); }); 

Another, more permanent solution was to change the datepicker.js file itself, but it looks like you are using cdn datepicker. If you can download it and use it locally, you can hack it, you will find a code similar to this

 click: function(e){ e.preventDefault(); var target = $(e.target).closest('span, td, th'), year, month, day; if (target.length === 1){ switch (target[0].nodeName.toLowerCase()){ ...ect... 

If you add the e.stopPropagation () function to this area, for example,

 click: function(e){ e.preventDefault(); e.stopPropagation(); // <-- add this var target = $(e.target).closest('span, td, th'), year, month, day; if (target.length === 1){ switch (target[0].nodeName.toLowerCase()){ 

your date pickers will stop interfering with your other DOM elements, although this solution is more widespread, and I would check that it does not affect other areas of your code.