Datepicker 不会在引导模式中打开

Posted 2023-05-07

【中文标题】Datepicker 不会在引导模式中打开

【英文标题】：Datepicker won't open in a bootstrap modal

【发布时间】：2017-06-14 09:57:49

【问题描述】：

我的视图中有一个带有日期选择器输入字段的简单模式。我按照堆栈溢出答案中的一些说明进行操作，但我仍然无法正常工作，我不知道为什么。

这是我的 asp.net mvc 视图中的脚本部分：

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">

    $('#mdl').on('click', function () 
       var parent = $(this).closest('.jumbotron');
       var name = parent.find('input[name="NAME_OF_MODEL"]').val();
       var id = parent.find('input[name="ID_OF_MODEL"]').val();
       console.log(id);
       //var titleLocation = $('#myModal').find('.modal-body'); modal - title
       var titleLocation = $('#myModal').find('.modal-title');
       titleLocation.text(name);

       // for each information you'll have to do like above...

       $('#myModal').modal('show');

     );
);

    $(function () 
        $('.date-picker').datepicker();
    )


</script>

这里是模态：

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
            <p>Some text in the modal.</p>
            <input class='date-picker' />
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
        </div>
    </div>
</div>

任何帮助将不胜感激。

【问题讨论】：

第一次呈现页面时您的模态是否存在，或者它是动态添加的（例如使用 ajax），在这种情况下您需要在添加插件后附加它

不是动态添加的。

您的脚本顺序错误 - jquery 然后 jquery-ui :)

还是不行..

试试这篇文章的答案。 ***.com/questions/21059598/…

【参考方案1】：

您的问题与库的顺序有关：

更改顺序：

jquery-ui.css jquery-ui.min.js jquery.min.js

到：

jquery.min.js jquery-ui.css jquery-ui.min.js

所以结果是：

$(function () 

  $('#mdl').on('click', function () 
    var parent = $(this).closest('.jumbotron');
    var name = parent.find('input[name="NAME_OF_MODEL"]').val();
    var id = parent.find('input[name="ID_OF_MODEL"]').val();
    console.log(id);
    //var titleLocation = $('#myModal').find('.modal-body'); modal - title
    var titleLocation = $('#myModal').find('.modal-title');
    titleLocation.text(name);

    // for each information you'll have to do like above...

    $('#myModal').modal('show');

  );
  $('.date-picker').datepicker();

);

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button class="btn" id="mdl">Click Me</button>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
                <input class='date-picker'/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Save</button>
            </div>
        </div>
    </div>
</div>

【讨论】：

我按照你的建议做了，但还是不行。我看到你的 sn-p 有效，所以有什么想法可能是问题吗？

@RobertRoss 在准备好的dom中插入js代码。片段更新。如果您继续收到错误，请告诉我

@getanoM ，我仍然收到 Uncaught TypeError: $(...).datepicker is not a function at htmlDocument. (DisplayListOfRolesUser:96) at fire (jquery-1.10.2. js:3062) 在 Object.add [as done] (jquery-1.10.2.js:3108) 在 init.ready (jquery-1.10.2.js:285) 在 init (jquery-1.10.2.js:228 ) 在 jQuery (jquery-1.10.2.js:77) 在 HTMLDocument. (DisplayListOfRolesUser:95) 在 j (jquery.min.js:1) 在 k (jquery.min.js:1)

从您的错误消息和您的 html 片段中，我看到您包含了两个不同版本的 jQuery 库。深入了解您的代码并仅使用一个 jQuery 库，然后包含一个兼容的 jQuery ui 库。我希望这会对你有所帮助。

【参考方案2】：

必须要做的事情：

将此添加到您的 CSS：

.datepicker-panel 
   z-index: 9999 !important; /* has to be larger than 1050 */

.datepicker-container 
   z-index: 9999 !important; /* has to be larger than 1050 */

将此添加到您的 js 中

  $('#datepicker').datepicker(
    container: '#my-modal',
  );