Conflict between datepicker and modal in bootstrap

Conflict between datepicker and modal in bootstrap

by labanino

HTML

<script src="http://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="http://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://tarruda.github.io/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div class="well">
    <div id="patient-registration" class="input-append">
        <input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input> <span class="add-on">
      <i data-time-icon="icon-time" data-date-icon="icon-calendar">
      </i>
    </span>

    </div>
</div>
<!-- Button to trigger modal -->
<a href="#registration-modal" role="button" class="btn" id="registration-link">Launch modal</a>

<!-- Modal -->
<div id="registration-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
         <h3 id="myModalLabel">Modal header</h3>

    </div>
    <div class="modal-body">
        <div class="span6">
            <section id="wizard">
                <div id="rootwizard">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <div class="container">
                                <ul class="nav nav-pills">
                                    <li class="active"><a href="#tab1" data-toggle="tab">1</a>
                                    </li>
                                    <li><a href="#tab2" data-toggle="tab">2</a>
                                    </li>
                                    <li><a href="#tab3" data-toggle="tab">3</a>
                                    </li>
                                    <li><a href="#tab4" data-toggle="tab">4</a>
             ...

CSS

.triage-submited { display: none; clear: both; }
.red { color: red; font-size: 22px; vertical-align: -8px; }
#rootwizard .navbar .nav > li > a { padding: 10px; }

JavaScript

$(function () {
    $('#tooltip').tooltip('hide');
    $('#roomModal').modal('show');
    $('#popover').popover({
        trigger: 'click'
    });

    $('.accordion').collapse()

   
    /* FLOORPLANT POPOVER */
    $('[rel=popover]').popover({
        html: true,
        content: function () {
            return $('#popover_content_wrapper').html();
        }
    });

    /* DATE PICKER */
    $('#patient-registration, #datetaken, #ad-effective-date, #polst-effective-date, #vaccine-date-taken, #lmp, #pregnant-edc').datetimepicker({
        language: 'en',
        pickTime: false,
        pick12HourFormat: true
    });
    $('#dtp_input, #dtp_datetaken, #ad-effective-date-input, #polst-effective-date-input, #vaccine-date-taken-input, #lmp-input,' +
        '#pregnant-edc-input').focus(function () {
        $(this).next(".add-on").click();
    });

    /* DATE-TIME PICKER */
    $('#patient-deceased, #datetaken, #dt-bmi, #blood-preassure-dob, #dt-pulse, #dt-glucose, #dt-temperature, #dt-respiratory,' +
        '#dt-sao2').datetimepicker({
        language: 'en',
        pickTime: true,
        pick12HourFormat: true
    });
    $('#pdtp_input, #dtp_datetaken, #dt-bmi-input, #blood-preassure-dob-input, #dt-pulse-input, #dt-glucose-input, #dt-temperature-input,' +
        '#dt-respiratory-input, #dt-sao2-input').focus(function () {
        $(this).next(".add-on").click();
    });

    /* DROPDOWN SUB-MENUS */
    jQuery('.dropdown-menu li a').mouseover(function (e) {
        e.stopPropagation();
        jQuery(this).parent().parent().find('li').each(function () {
            jQuery(this).removeClass('open');
        });
        jQuery(this).parent().addClass('open');
    });

    jQuery('.dropdown-toggle').click(function (e) {
        jQuery(this).parent().find('li').each(function () {
            jQuery(this).removeClass('open');
        });
    });

    /* VITALS MODAL */
    var selected = false;
    $('#vitals').click(function () {
        if (selected) {
     ...