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>

     

  • 相关阅读:
    前端 --> CSS基础
    前端 css 补充内容
    前端 ---> HTML
    MySQL数据库 -- Navicat、pycharm连接数据库
    mysql数据库 --表查询
    IOC Unity
    泛型2
    泛型1
    特性 Attribute
    里氏替换原则
  • 原文地址:https://www.cnblogs.com/z_lb/p/6681823.html
Copyright © 2011-2022 走看看