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>

     

  • 相关阅读:
    syslog(),closelog()与openlog()--日志操作函数 (1)
    C语言之strrchr函数
    HTTP 报文
    Apache Hive 建表操作的简单描述
    Apache Hive 简介及安装
    Hadoop之MapReduce(二)序列化,排序及分区
    Hadoop之MapReduce(一)简介及简单案例
    Hadoop之HDFS(三)HDFS的JAVA API操作
    Hadoop之HDFS(二)HDFS基本原理
    Hadoop之HDFS(一)HDFS入门及基本Shell命令操作
  • 原文地址:https://www.cnblogs.com/z_lb/p/6681823.html
Copyright © 2011-2022 走看看