Prevent Datepicker from closing a parent dropdown

Question

I'm using bootstrap to develop a site and I need a form within a dropdown in my top nav.

This works fine but I also have to use a datepicker in one of the fields and when the user selects a different month, the parent dropdown closes.

I'd like it so that you can click anywhere within the datepicker without the dropdown closing.

Alternatively the dropdown could be altered so that it only opens and closes with a click on the Nav link, rather than closing 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

You must simply prevent the .datapicker's click event from bubbling up 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's 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 2

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's date
    showOtherMonths     : true,         // displays days at beginning or end of adjacent months
    selectOtherMonths   : true
}).click( function() {
    $('#ui-datepicker-div').click(function(e){
       e.stopPropagation();
    });
  });
});