Disable datepicker close dropdown

Question

I use bootstrap to develop the site, and I need a form in the drop-down list of my top navigator.

This works fine, but I should also use datepicker in one of the fields, and when the user selects another month, the drop-down list of the parent closes.

I would like you to be able to click anywhere on the date picker without a drop-down menu.

Alternatively, the drop-down list can be modified so that it opens and closes by clicking on the Nav link, and does not close when you click anywhere.

jsfiddle here - http://jsfiddle.net/ackuu/

Thanks for any help!

HTML

<div class="navbar txt-grey" role="navigation"> <div class="navbar-header"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Dropdown</b><b class="caret"></b></a> <ul class="dropdown-menu"> <form method="POST" class="form"> <div class="field clear"> Date <input type="text" name="p_start_date" id="datepicker" class="input datepicker" placeholder="Select date" /> </div> <button type="submit" name="res_submit">Go</button> </form> </ul> </li> </ul> </div> </div> 

Js

 $().ready(function(){ $(".datepicker").datepicker({ dateFormat : 'dd-mm-yy', firstDay : 1, minDate : 1, showOtherMonths : true, selectOtherMonths : true }); }); 

Answer 1

The code below works for me.

 $().ready(function(){ $(".datepicker").datepicker({ dateFormat : 'dd-mm-yy', firstDay : 1, // sets first day of the week to Monday minDate : 1, // sets first available date in calendar to tomorrow date showOtherMonths : true, // displays days at beginning or end of adjacent months selectOtherMonths : true }).click( function() { $('#ui-datepicker-div').click(function(e){ e.stopPropagation(); }); }); }); 

Answer 2

You should simply disable the click .datapicker click event in the DOM tree:

 $().ready(function(){ $(".datepicker").datepicker({ dateFormat : 'dd-mm-yy', firstDay : 1, // sets first day of the week to Monday minDate : 1, // sets first available date in calendar to tomorrow date showOtherMonths : true, // displays days at beginning or end of adjacent months selectOtherMonths : true }).click(function(e) { e.stopPropagation(); // <--- here }); }); 

Forked fiddle → http://jsfiddle.net/VC288/

Answer 3

I know this is an old question, but the developer performed a debugging function to do just that

 $().ready(function(){ $(".datepicker").datepicker({ debug:true; }); });