bootstrap inline Date picker inside popover

HTML

<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker.css">
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button id="popoverExampleTwo">Remind</button>

<div id="content" style="display:none;">
    <button id="NW">Next Week</button>
    <button id="NM">Next Month</button>
   <div id="datepicker" data-date="12/03/2012"></div>
   <input type="hidden" id="my_hidden_input" />
    
    <input type="text" id="valDate"/>
</div>

CSS

#popoverExampleTwo{
    margin:0 100px;
    text-align:center;
}
#content button{
    
}

#my_hidden_input{
    display:block;
}

JavaScript

$(function(){
    $("#popoverExampleTwo").popover({
        html: true,
        content: function() {
          return $('#content').html();
        },
        trigger:'click',
        title: '',
        placement:'bottom'
    });
    
});    
$('html').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' &&
     !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
      $('.popover').css('display','none');
  }
});

var today = new Date();
$('#datepicker').datepicker({
	startDate: today
});
$('#dateipicker').on("changeDate", function() {
    $('#valDate').val(
        $('#datepicker').datepicker('getFormattedDate')
    );
});