Question

我在模态中有一个表单。

我正在尝试将一个输入字段更新为日期选择器，但日历未显示。

这是我的html头：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">    </script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="http://www.useragentman.com/tests/html5Forms/shared/js/modernizr.com/Modernizr-2.5.3.forms.js"></script>

<script>$('#idTourDateDetails').datepicker(); </script>

<style>
body {   margin: 0;
font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif; }
.datepicker {
  z-index: 1600 !important; /* has to be larger than 1050 */
}
</style>

我的HTML身体： -

<div class="modal fade" id="myModal3" role="dialog">

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<form role="form" name="passdata" action="save.php" method="POST">              

<div class="col-xs-6"><label>Joining Date</label>
 <input type="text" name="idTourDateDetails" id="idTourDateDetails" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span>
  <br/> </div>
</div>  

<input type="submit" class="btn btn-info" value="Submit" style="margin-top:20px;margin-left:80%; margin-bottom:15px;">

<script type="text/javascript">
$(document).ready(function(){
$("#myModal3").modal({backdrop: "static"});
$("#myModal3").modal('show');
});
</script>

这就是我获取html输出的方式： -

html output

当我点击输入框时，也没有发生任何事情。

不确定我做错了什么

Answer 1

输入类型为text，将其替换为date并且效果良好

<input type="date" name="idTourDateDetails" id="idTourDateDetails" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span>

这是JS Bin

Answer 2

请确保模态框是正确的html结构。我用你的代码用正确的html结构做了一个例子。请检查一下。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">    </script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="http://www.useragentman.com/tests/html5Forms/shared/js/modernizr.com/Modernizr-2.5.3.forms.js"></script>
  <title>JS Bin</title>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
<form>
                   <div class="col-xs-6"><label>Joining Date</label>
                     <input type="text" name="idTourDateDetails" id="idTourDateDetails" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span>
                     <br/> 
                  </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


      <script type="text/javascript">
jQuery(document).ready(function(){
  $('#idTourDateDetails').datepicker();
$("#myModal3").modal({backdrop: "static"});
$("#myModal3").modal('show');
});
</script>

</body>

</html>

Answer 3

以上所有评论均未回答真正的问题。 Datepicker.js或CSS插件在模式上无效。以正常形式，例如

<div class="input-group">
  <span class="input-group-addon"><span class="fa fa-calendar"></span></span>
  <input type="text" class="form-control datepicker" data-date-end-date="0d" required="">                                            
</div>

该代码以常规形式工作。当您将相同的代码传输到模式时，它不起作用。（如果您的模态包含需要输入日期的表单字段）在输入字段中使用“ type =“ date””只会触发默认的浏览器日历弹出窗口，而不触发datepicker插件日历弹出窗口。（Firefox和Edge浏览器）。简而言之，datepicker插件不支持模态上的日历弹出窗口，因此仅使用默认日期类型：

<input type="date" class="form-control" required="">

Answer 4

.ui-datepicker 
{
    z-index: 1600 !important; /* has to be larger than 1050 */
}

Datepicker在模态中不起作用

4 个答案: