Bootstrap 日期选择器在 Bootstrap 弹出窗口中不起作用

Question

我有一个 Bootstrap 弹出框，在里面我想有一个内联日期选择器。然而，日期选择器被创建，但没有任何日期选择器事件触发。

我还参考了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

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

Answer 1

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

//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');    
            });
	    });

	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<div class="box">
    <button class="btn-filter popover-calendar" data-contentwrapper=".pop-calendar"><span><i class="ico ico-calendar"></i>Today</span>
    </button>
    <div class="pop-content pop-calendar">
        <div id="datepicker"></div>
    </div>
</div>

您可以根据自己的设计对其进行样式化

Answer 2

更改您的脚本代码

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

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

 })


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