模式中的 Bootstrap-datepicker 使用引导程序在选择时擦除隐藏的字段答案

【问题标题】：Bootstrap-datepicker in modal using bootstrap erases hidden fileds behind when selected模式中的 Bootstrap-datepicker 使用引导程序在选择时擦除隐藏的字段
【发布时间】：2016-07-04 18:52:35
【问题描述】：

我正在使用 boostrap3、jquery 和 bootstrap-datepicker 制作的页面遇到一个非常奇怪的问题。

我有一个动态模式（里面有一个表单），用户可以在其中选择一个日期。因为模态是动态的，所以我将一些值从按钮发送到模态内的一些隐藏值。（不管它们是在模态的内部还是外部……）

问题是当用户单击日期选择器时，所有输入文本/隐藏值都被删除并变得未定义。

我在这里设置了一个例子：https://codepen.io/anon/pen/VjWzVr

代码是：

$('#myModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  $('#datetimepicker1').datetimepicker({
    defaultViewDate: 'today',
    autoclose:true,
    todayHighlight:true
  });
  $('#datetimepicker1').datetimepicker('update', new Date());
  $('#datetimepicker1').datetimepicker('update');
  var showInField = button.data('showid') // Extract info from data-* attributes
  $('#test').val(showInField)
})

还有 HTML：

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal" data-showid="1">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" 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 id="datetimepicker1" class="input-append date">
      <input data-format="yyyy-mm-dd" type="text"></input>
      <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
  </div>
</div><br>
<input type="text" name="test" id="test" value="">

使用：

https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
https://s3-us-west-2.amazonaws.com/s.cdpn.io/2708/bootstrap-datetimepicker.min.js

我进行“更新”的原因是日期选择器在字段中写入了今天的日期...codepen 没有显示它...但它可以工作。

有人知道为什么它会清除页面上的每个输入字段吗？

谢谢

【问题讨论】：

这是因为您的日期格式。您还需要在 JS 中为 DatePicker 定义它......
也试试这个：format: 'yyyy-mm-dd'
是的，对不起，我忘记了在测试时删除了它，然后又忘记了添加它。它仍然在做这个错误。

标签： jquery twitter-bootstrap datepicker

【解决方案1】：

我使用了不同版本的 bootstrap-datepicker，它现在可以工作了。否决我的问题是一个菜鸟的事情......因为我展示了一个问题的例子并解释了正在发生的事情...... 提供的评论并没有解决问题...因为他们可以轻松地测试 codepen 中的代码并发现它不起作用。

【讨论】：