Question

我正在使用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

我正在进行“更新”的原因是，日期选择器今天的日期写在字段中...代码集没有显示它......但是它有效。

任何人都知道为什么它会删除页面上的每个输入字段？

由于

Answer 1

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

使用bootstrap的模态中的Bootstrap-datepicker会在选中后删除隐藏的文件

1 个答案: