Bootstrap datepicker not working inside Bootstrap popover

Question

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.

@NikhilRajA I want an inline datepicker. Not a datepicker on focusing an input control — Senjuti Mahapatra, Jul 19 '17 at 06:44
Are you looking for this kind of stuff http://jsfiddle.net/nikhilrajnair/ruts1939/ ? — Nikhil Raj A, Jul 19 '17 at 07:16
@NikhilRajA Yes thanks :) Put this as answer, so that I can vote it up. — Senjuti Mahapatra, Jul 19 '17 at 07:59

Nikhil Raj A · Accepted Answer · 2017-08-24T09:03:21.747

This is a simple jqueryUI calender 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

score 0 · Answer 2 · edited Jul 19 '17 at 05:26

0

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

edited Jul 19 '17 at 05:26

Alive to die - Anant

70,531
10
51
98

answered Jul 19 '17 at 05:24

I tried implementing your solution in the Fiddle I provided, but it did not work. – Senjuti Mahapatra Jul 19 '17 at 09:15

Bootstrap datepicker not working inside Bootstrap popover

2 Answers2