当前位置:主页 > jQuery库 > 日期 / 时间 >

模态弹出窗口中的 Bootstrap 日期选择器 - datepicker
栏目分类:日期 / 时间   发布日期:2021-08-17   浏览次数:

另一个日期选择器 jQuery 插件很容易在 Bootstrap 模态弹出窗口中使用。该插件具有多种选项、多种功能和多种语言来选择当前、选定或过滤的日期。


依赖:jQuery 3.3.1或最新版本,Bootstrap 4.1.3


如何在 Bootstrap Modal 中使用 Datepicker:

1. 要开始使用此插件,请加载 jQuery 和 Bootstrap 框架。

<!-- jQuery -->
<script src="/jquery-3.3.1.slim.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="/bootstrap/4.1.3/css/bootstrap.min.css">
<!-- Bootstrap Js -->
<script src="/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

2. 在此之后,包括日期选择器的 javascript 和 CSS 文件。

<!-- Datepicker CSS -->
<link rel="stylesheet" href="css/datepicker.css">
   
<!-- Datepicker JS-->
<script src="js/datepicker.js"></script>

3. 要在模态弹出窗口中创建 Bootstrap 日期选择器,请构建如下所示的 HTML 结构。

<!-- Button trigger modal -->
   <button type="button" class="btn btn-primary" data-target="#modal" data-toggle="modal">
      点击演示
   </button>
   
   <!-- Modal -->
   <div class="modal fade" id="modal" role="dialog" aria-labelledby="modalLabel" tabindex="-1">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <h5 class="modal-title" id="modalLabel">Datepicker</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">×</span>
           </button>
         </div>
         <div class="modal-body" style="height: 1000px;">
           <input type="text" class="form-control" data-toggle="datepicker">
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
         </div>
       </div>
     </div>
   </div>
 </div>

4.在jQuery文档就绪函数中初始化插件,使datepicker激活。

$(function() {
   $('[data-toggle="datepicker"]').datepicker({
      autoHide: true,
      zIndex: 2048,
   });
});



官方网站:https://fengyuanchen.github.io/datepicker/

上一篇:没有了
下一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库