Datepicker 不在模态内工作

Question

I have a form inside a modal.我在模态中有一个表单。

I am trying to update one input field in to a datepicker, but the calendar is not showing up.我正在尝试将一个输入字段更新为日期选择器，但日历未显示。

Here is my html head:这是我的 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>

My html body:-我的 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>

This is how I am getting the html output:-这就是我获得 html output 的方式：-

html output html output

Also nothing is happening when I click on the input box.当我点击输入框时也没有任何反应。

Not sure what I am doing wrong不确定我做错了什么

Answer 1

The input type is text , replaced it to date and it will work well输入类型是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>

Here is JS Bin这里是JS Bin

Answer 2

Please make sure Modal box is correct html structure.请确保模态框是正确的 html 结构。 I made an example with your codes with correct html structure.我用正确的 html 结构用你的代码做了一个例子。 Please check it.请检查一下。

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

All the above comments they don't answer the real problem.以上所有评论都没有回答真正的问题。 Datepicker.js or css plugin does no work on modal. Datepicker.js 或 css 插件在模态上不起作用。 In a normal form eg以正常形式例如

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

That code works in a general form.该代码以一般形式工作。 When you transfer the same code to a modal, it does not work.当您将相同的代码传输到模态时，它不起作用。 (That's if your modal contains a form field which takes date input) Using ''type="date"' in input field just triggers the default browser calendar pop but not the datepicker plugin calendar pop.(Firefox & Edge Browsers). （如果您的模态包含接受日期输入的表单字段）在输入字段中使用 ''type="date"' 只会触发默认浏览器日历弹出而不是日期选择器插件日历弹出。（Firefox 和 Edge 浏览器）。 In-short the datepicker plugin does not support calendar pop ups on modals hence just use the default date type:简而言之，datepicker 插件不支持模式上的日历弹出窗口，因此只需使用默认日期类型：

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

Answer 4

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

Answer 5

I had a similar issue where the datepicker was displaying below the viewport.我有一个类似的问题，日期选择器显示在视口下方。 If the input with the datepicker calendar is in a modal, the top position of the jquery ui element <div id="ui-datepicker-div"></div> (this is added to the <body/> ) will be incorrectly calculated.如果带有日期选择器日历的输入是模态的，则 jquery ui 元素<div id="ui-datepicker-div"></div>的顶部 position（添加到<body/>中）将不正确计算。

Chrome ( top="285px" ): Chrome ( top="285px" ):

IE11 ( top="2853.13px" ): IE11 ( top="2853.13px" ):

As you can see the top position is significantly higher in IE11, which is because it's including the window scroll position.如您所见，顶部 position 在 IE11 中明显更高，这是因为它包括 window 滚动条 position。

To get round this you can do the following:要解决这个问题，您可以执行以下操作：

Check for IE11 browser only - NB!仅检查 IE11 浏览器 -注意！ This is generally not recommended一般不建议这样做
Find the to position of the input where the calendar should appear below(elementTopPosition)找到日历应该出现在下方的输入的 position（elementTopPosition）
Deduct the "elementTopPosition" from the window scroll position and add the height of the "elementTopPosition"从 window 滚动 position 中减去“elementTopPosition”并添加“elementTopPosition”的高度
Set the new top position to datePickerIEPosition将新的top position设置为datePickerIEPosition

// IE11 fix
var isIE11 = !!navigator.userAgent.match(/Trident.*rv\:11\./);
if(isIE11) {
   $('.modal-body input.date-field').on('click', function() {
      var datePickerIEPosition = $(this).offset().top - $(window).scrollTop() + $(this).outerHeight();
      var $datepickerDiv = $('#ui-datepicker-div');
      if($(this).is(":focus")) {
         $datepickerDiv.css({ top: datePickerIEPosition + 'px' });
      } 
   });
}

Datepicker 不在模态内工作

问题描述

5 个解决方案

解决方案1
0 已采纳 2017-08-09 17:44:13

解决方案2
0 2017-08-09 18:13:27

解决方案3
0 2019-07-13 06:40:50

解决方案4
0 2020-06-29 10:01:16

解决方案5
0 2021-10-04 13:21:42

Datepicker 不在模态内工作

问题描述

5 个解决方案

解决方案1 0 已采纳 2017-08-09 17:44:13

解决方案2 0 2017-08-09 18:13:27

解决方案3 0 2019-07-13 06:40:50

解决方案4 0 2020-06-29 10:01:16

解决方案5 0 2021-10-04 13:21:42

解决方案1
0 已采纳 2017-08-09 17:44:13

解决方案2
0 2017-08-09 18:13:27

解决方案3
0 2019-07-13 06:40:50

解决方案4
0 2020-06-29 10:01:16

解决方案5
0 2021-10-04 13:21:42