JSFiddle - React, Tailwind, and code Playground

by Doug Hill

HTML

<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<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>

CSS

.box {
    padding:20px;
    text-align:center
}
.calendar-open {
    margin-left:-130px;
}
.popover-content {
    padding:0;
}

JavaScript

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

	});