Datepicker inside bootstrap popover [closed]

Question

I have a datepicker placed inside a popover. Datepicker not working. Has any one did like this

<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/

Can someone spot the error?

Answer 1

You can achieve with following approach but the way you are trying, I've doubts it may not be possible with bootstrap datetimepicker, reason moment.js throws following error

SyntaxError: unreachable code after return statement

Put HTML content inside popover trigger button data-content='' and remove class="hide" from HTML and also you have to use a popover callback function or bootstrap popover event listener, your choice.

<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>

With Callback Function

$(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

With popover event listener

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

Fiddle with event listener