Question

我在弹出窗口中放置了一个日期选择器。 Datepicker无法正常工作。有没有人喜欢这个

<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

您可以通过以下方法实现，但尝试的方式，我怀疑它可能无法使用bootstrap datetimepicker，原因moment.js会引发跟踪错误

SyntaxError：返回语句后无法访问的代码

将HTML内容放入popover触发器按钮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

使用popover事件监听器

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

Fiddle with event listener

Datepicker里面的bootstrap popover

1 个答案: