嵌入式引导数据报警器不会持久

Question

我想要一个引导数据报警器作为我正在构建的订单表单的一部分，但不幸的是，每当我单击表单的另一部分时，它似乎就消失了，这一点根本做不到。

我想我所要做的就是按照这里的说明：https://bootstrap-datepicker.readthedocs.org/en/latest/markup.html#inline-or-embedded来获得一个选择器，即总是可见的。

我的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>

​

我的JavaScript：

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

看起来很简单..。我做错什么了？

Answer 1

好像对我有用..。提交后日历会消失吗？

​

$("#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>

​