.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);
});
})
This Pen doesn't use any external JavaScript resources.