Datepicker внутри начальной загрузки

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

Вы можете добиться с помощью следующего подхода, но, как вы пытаетесь, я сомневаюсь, что это может быть невозможно с начальной загрузкой datetimepicker причина moment.js выдает следующую ошибку

SyntaxError: недоступный код после оператора возврата

Поместите HTML-контент внутри кнопки запуска поповера data-content='' и удалить class="hide" из HTML, а также вы должны использовать функцию обратного вызова popover или загрузчик слушателя события popover, по вашему выбору.

<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();
        }
    });
});

Скрипка с функцией обратного вызова

С слушателем событий поповера

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

Скрипка со слушателем событий