引导弹出窗口内的日期选择器[关闭]

Question

我在弹出框内放置了一个日期选择器。日期选择器不工作。有人这样做过吗

<div class="col-sm-4">
            <button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" 
                data-placement="bottom" data-container="body" data-html="true" id="login"><i class="fa fa-calendar"></i> - <i class="fa fa-calendar"></i>
            </button>
             <div id="popover-content" class="hide">
                <form role="form" method="post">
                    <div class="form-group">
                        <label>Start time?</label>
                        <div class='input-group date' id='datetimepicker1'>
                            <input type='text' class="form-control" placeholder="Start Date time of event"/>
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>End time?</label>
                        <div class='input-group date' id='datetimepicker2'>
                            <input type='text' class="form-control" placeholder="End Date time"/>
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                    <div class="form-group">
                        <button class="btn btn-primary btn-block">Search between dates</button>
                    </div>
                </form>
             </div>
        </div>

JS

$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();

$("#datetimepicker1").on("dp.change", function (e) {
    $('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});

$("#datetimepicker2").on("dp.change", function (e) {
    $('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});

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

http://jsfiddle.net/J7nDz/43/

有人能发现错误吗？

Answer 1

您可以通过以下方法实现，但您尝试的方式，我怀疑引导程序datetimepicker 可能无法实现，原因moment.js 会引发以下错误

语法错误：return 语句后无法访问代码

将 HTML 内容放入弹出触发按钮 data-content='' 并从 HTML 中删除 class="hide"，您还必须使用 popover callback function 或 bootstrap popover event 侦听器，您可以选择。

<div class="col-sm-4">
    <button tabindex="0" class="btn btn-primary" role="button" data-toggle="popover" data-trigger="click" data-placement="bottom" data-container="body" data-html="true" id="PopS"
    data-content='
    <div id="popover-content">
    <form role="form" method="post">
        <div class="form-group">
            <label>Start time?</label>
            <div class="input-group date" id="datetimepicker1">
                <input type="text" class="form-control" placeholder="Start Date time of event" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
        <div class="form-group">
            <label>End time?</label>
            <div class="input-group date" id="datetimepicker2">
                <input type="text" class="form-control" placeholder="End Date time" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-primary btn-block">Search between dates</button>
        </div>
    </form>
    </div>'>Date</button>
</div>

带回调函数

$(document).ready(function () {
    var showPopover = $.fn.popover.Constructor.prototype.show;
    $.fn.popover.Constructor.prototype.show = function () {
        showPopover.call(this);
        if (this.options.showCallback) {
            this.options.showCallback.call(this);
        }
    }
    $("#PopS").popover({
        html: true,
        showCallback: function () {
            $('#datetimepicker1').datetimepicker();
            $('#datetimepicker2').datetimepicker();
        }
    });
});

Fiddle with callback function

带有弹出事件监听器

$(document).ready(function () {
    $("#PopS").popover({
        html: true
    }).on('shown.bs.popover', function () {
        $('#datetimepicker1').datetimepicker();
        $('#datetimepicker2').datetimepicker();
    });
});

Fiddle with event listener