Bootstrap datepicker在Bootstrap popover中不工作

kfgdxczn 于 7个月前发布在 Bootstrap

关注(0)|答案(2)|浏览(86)

我有一个Bootstrap Popover，在里面我想有一个内联的datepicker。然而，datepicker被创建，但没有datepicker事件触发。
我也参考了Link 1，Link 2和Link 3，但没有一个适合我。

HTML代码

<div class="container" style="text-align:center;">
  <a href="#" data-toggle="popover" data-placement="bottom" id="lnkLaunchDate">
    <i class="glyphicon glyphicon-filter" style="color: #000 !important;"></i>
  </a>
</div>

<div id="popover-launchDate" class="hide">
  <div>
    <div id="launchDate" class="grid-filter-datepicker" style="font-size:9px !important"></div>
  </div>
</div>

字符串

脚本

$('[data-toggle="popover"]').popover({  
    html: true,
    title: function () {
        return "";
    },
    content: function () {
        return $("#popover-launchDate").html();
    },
    callback: function () { 
        $('#launchDate').datepicker();
    }

  }).on('shown.bs.popover', function() {
         $('#launchDate').datepicker();
     });

 $('#launchDate').datepicker();

型
我的demo
我错过什么了吗？任何帮助都将不胜感激。

twitter-bootstrap

来源：https://stackoverflow.com/questions/45181391/bootstrap-datepicker-not-working-inside-bootstrap-popover

2条答案

按热度按时间

q0qdq0h21#

这是一个使用Bootstrap HTML的简单jQueryUI日历实现

//POPOVER callback
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
  tmp.call(this);
  if (this.options.callback) {
    this.options.callback();
  }
};
$('.popover-calendar')
  .popover({
    html: true,
    placement: 'bottom',
    fixclass: 'calendar',
    content: function () {
      return $($(this).data('contentwrapper')).html();
    },
    callback: function () {
      $('#datepicker').datepicker({});
    },
  })
  .on('click', function () {
    $(this).next().addClass('calendar-open');
  });

$('body').on('click', function (e) {
  $('.popover-calendar').each(function () {
    $('.popover-calendar').datepicker();
    $('.popover-calendar').mousedown(function () {
      $(this).datepicker('hide');
    });
  });
});

个字符
你可以按照你的设计风格

赞(0）回复(0）举报 7个月前

wi3ka0sx2#

更改脚本代码

$('[data-toggle="popover"]').popover({

        html: true,
        title: function () {
            return "";
        },
        content: function () {
            return $("#popover-launchDate").removeClass('hide');
        },
        callback: function () { 
            $('#launchDate').datepicker();
        }

 })

$('#launchDate').datepicker();

字符串

赞(0）回复(0）举报 7个月前

我来回答

Bootstrap datepicker在Bootstrap popover中不工作

2条答案

相关问题

热门标签

最新问答