CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapdatepicker
Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

Bootstrap datepicker not working inside Bootstrap popover

I have a Bootstrap Popover and inside it I want to have an inline datepicker. However the datepicker gets created but none of the datepicker events fire.

I have also taken reference from Link 1, Link 2 and Link 3 but none of them works for me.

HTML Code

<div class="container" style="text-align:center;">
  <a href="#" data-toggle="popover" data-placement="bottom" id="lnkLaunchDate">
    <i class="glyphicon glyphicon-filter" style="color: #000 !important;"></i>
  </a>
</div>

<div id="popover-launchDate" class="hide">
  <div>
    <div id="launchDate" class="grid-filter-datepicker" style="font-size:9px !important"></div>
  </div>
</div>

Script

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

  }).on('shown.bs.popover', function() {
         $('#launchDate').datepicker();
     });

 $('#launchDate').datepicker();

Here is my demo

Am I missing something? Any help will be appreciated.

Upvotes: 1

Views: 956

Answers (2)

Nikhil Raj A
Nikhil Raj A

Reputation: 175

This is a simple jQueryUI calendar implementation using Bootstrap HTML

//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');
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<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>

You can style it up as per your design

Upvotes: 1

user8262906
user8262906

Reputation:

change your script code

$('[data-toggle="popover"]').popover({

        html: true,
        title: function () {
            return "";
        },
        content: function () {
            return $("#popover-launchDate").removeClass('hide');
        },
        callback: function () { 
            $('#launchDate').datepicker();
        }

 })


$('#launchDate').datepicker();

Upvotes: 0

Related Questions