Embedded Bootstrap Datepicker Will Not Persist

Question

I would like a bootstrap datepicker as part of an order form I am building, but unfortunately it seems to disappear whenever I click another part of the form, which will simply not do.

I thought all I would have to do is follow the instructions here: https://bootstrap-datepicker.readthedocs.org/en/latest/markup.html#inline-or-embedded to get a picker that is always visible.

My HTML:

<div id="orderBox" class="box container 75%">
<!-- Contact Form -->
<form method="post" action="#">
    <div class="row 50%">
        <div class="4u 6u(mobile)">
            <input type="text" name="firstName" placeholder="First Name">
        </div>
        <div class="4u 6u(mobile)">
            <input type="text" name="lastName" placeholder="Last Name">
        </div>
        <div class="4u 6u(mobile)">
            <input type="email" name="email" placeholder="Email">
        </div>
    </div>
    <div id="dateAnchor" class="row 50%">
        <div id="myFirstDate" class="12u 6u(mobile)" data-date="06/07/2015"></div>
    </div>
    <div class="row">
        <div class="12u">
            <ul class="actions">
                <li>
                    <input type="submit" value="Place Order">
                </li>
            </ul>
        </div>
    </div>
</form>

My JavaScript:

$("#myFirstDate").datepicker();

Seems simple enough... what am I doing wrong?

Answer 1

It seems to work for me... does the calendar disappear after the submit?

$("#myFirstDate").datepicker();

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/mint-choc/jquery-ui.css">

<div id="orderBox" class="box container 75%">
  <!-- Contact Form -->
  <form method="post" action="#">
    <div class="row 50%">
      <div class="4u 6u(mobile)">
        <input type="text" name="firstName" placeholder="First Name" />
      </div>
      <div class="4u 6u(mobile)">
        <input type="text" name="lastName" placeholder="Last Name" />
      </div>
      <div class="4u 6u(mobile)">
        <input type="email" name="email" placeholder="Email" />
      </div>
    </div>
    <div id="dateAnchor" class="row 50%">
      <div id="myFirstDate" class="12u 6u(mobile)" data-date="06/07/2015"></div>
    </div>
    <div class="row">
      <div class="12u">
        <ul class="actions">
          <li>
            <input type="submit" value="Place Order">
          </li>
        </ul>
      </div>
    </div>
  </form>