Question

我想将bootstrap日期选择器作为我正在构建的订单表单的一部分，但不幸的是，只要我点击表单的另一部分，它就会消失，这根本就不会。

我认为我所要做的就是按照此处的说明操作：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

它似乎对我有用......提交后日历是否会消失？

＆＃13;

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

＆＃13;

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

＆＃13;

嵌入式Bootstrap Datepicker不会持久化

1 个答案: