zoukankan      html  css  js  c++  java
  • Bootstrap datepicker 在弹出窗体modal中不工作

    解决办法

    在 show 方法后面 添加 下面一段代码

     $('#modalCard').modal('show');—例子 打开 弹出窗体
    //$('#modalCard').modal('hide');
    $('#modalCard').on('shown.bs.modal', function () {
    //$('.input-group.date').datetimepicker({
    $('#dpReceiveDate').datetimepicker({
                    format: "yyyy-MM-dd",
    //startDate: "01-01-2015",
                    //endDate: "01-01-2020",
                    //todayBtn: "linked",
                    //autoclose: true,
                    //todayHighlight: true,
    language: 'zh-CN',
                    pickTime: false,
                    container: '#modalCard modal-body'
    });
            });

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

    $('#myModal').on('shown.bs.modal', function() {
      $('.input-group.date').datepicker({
        format: "dd/mm/yyyy",
        startDate: "01-01-2015",
        endDate: "01-01-2020",
        todayBtn: "linked",
        autoclose: true,
        todayHighlight: true,
        container: '#myModal modal-body'
      });
    });
    
    $("[id=add]").click(function() {
      $("#myModal .modal-header h4").html("Request for Change");
      $("#myModal .modal-body").html('<form class="form-horizontal" role="form"><br /><br /><label class="col-sm-2 control-label">Date Required</label><div class="col-sm-3"><div class="input-group date col-sm-8"><input type="text" class="form-control" id="DateRequired"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span></div></div></div>');
      $("#myModal").modal("show");
    });
     

    并且 在 样式中 改变 datepicker 的z-index 值

    <style>
    .datepicker {
    z-index: 1600 !important; /* has to be larger than 1050 */
    }
    .bootstrap-datetimepicker-widget 
    {
    z-index: 1601   !important;
        }
    </style>

     

  • 相关阅读:
    Entity Framework Core Code First 项目实践
    客户至上
    ASP.NET MVC 项目文件夹结构
    'Microsoft.VisualStudio.Editor.Implementation.EditorPackage' package did not load correctly
    Validate the date format
    ASP.NETAutocomplete control
    Javascript 浏览器检测
    动态代理模式_应用(Redis工具类)
    微服务框架
    .Net Core 分布式微服务框架
  • 原文地址:https://www.cnblogs.com/z_lb/p/6681823.html
Copyright © 2011-2022 走看看