.panel.panel-info
  .panel-heading
    h4.panel-title
      a(href="#collapsed-content" data-toggle="collapse")
        span.badge Dates
  .panel-collapse.collapse.in#collapsed-content
    .panel-body
      .datepicker-container.col-xs-12.col-sm-4#datepicker1
        span.badge.datepicker-toggler First date
        .input-group
          input.form-control(type="text")
          .input-group-addon.datepicker-toggler
            span.glyphicon.glyphicon-th
      .datepicker-container.col-xs-12.col-sm-4#datepicker2
        span.badge.datepicker-toggler Second date
        .input-group
          input.form-control(type="text")
          .input-group-addon.datepicker-toggler
            span.glyphicon.glyphicon-th

script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
script(src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js")
script(src="https://www.gstatic.com/charts/loader.js")
View Compiled
.datepicker-inline {
  border: 1px solid #efefef;
  box-shadow: 0px 6px 10px #f7f7f7;
  margin: 10px auto 0;
  border-radius: 2px;
}

.today,
.clear,
.datepicker-switch,
.day,
.month {
  transition: ease-out .3s;
  
  &:hover {
    transition: ease-in .3s;
  } 
}

.datepicker-days,
.datepicker-months,
.datepicker-years,
.datepicker-decades,
.datepicker-centuries {
  animation: fadeIn .3s ease-in;
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

#datepicker1,
#datepicker2 {
  .badge {
    margin: 0 6px 10px;
  }
}
View Compiled
const selectors = {
  dpInline: '.datepicker-inline',
  dpContainer: '.datepicker-container',
  dpToggler: '.datepicker-toggler',
  dpInput: '.datepicker-input',
  dpDayView: '.datepicker-days tbody',
};

const dpOptions = {
    format: 'dd/mm/yyyy',
    //startDate: 'd',
    clearBtn: true,
    todayBtn: true,
    disableTouchKeyboard: true,
    multidate: false,
    todayHighlight: true,
    weekStart: 1,
    calendarWeeks: true,
    keyboardNavigation: false,
};

$(document).ready( function() {
  
  const toggle = datepicker => {
    $(`#${datepicker} ${selectors.dpInline}`).hide();
    
    $(`#${datepicker} ${selectors.dpToggler}`).click( () => {
      $(`#${datepicker} ${selectors.dpInline}`).slideToggle();
    });

    $(`#${datepicker} ${selectors.dpInput}`).click( () => {
      $(`#${datepicker} ${selectors.dpInline}`).slideDown();
    });

    $(`#${datepicker} ${selectors.dpDayView}`).click( () => {
      $(`#${datepicker} ${selectors.dpInline}`).slideUp();
    });
  }
  
  $(selectors.dpContainer).datepicker(dpOptions);
  
  $(selectors.dpContainer).each((i, datepicker) => {
    toggle(datepicker.id);
  });
})

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.min.css
  2. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
  3. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.