Step1
Download the files from www.eyecon.ro (Stefan Petre) here:
http://www.eyecon.ro/bootstrap-datepicker/
you need only bootstrap-datepicker.js and the datepicker.css
Step2
Move the files in your assets folder from your project
Step3
Go to your page settings:
HEADER FILE ATTACHMENTS
click the + sign
you navigate to your assets folder add the bootstrap-datepicker.js and the datepicker.css ( this will be placed later by blocs in the header)
Step4
go to your page settings and ad code
then select footer
add this code there
<script>
$(document).ready(function(){
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('#start').datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#end')[0].focus();
}).data('datepicker');
var checkout = $('#end').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
}
}).on('changeDate', function(ev) {
checkout.hide();
}).data('datepicker');
})
</script>
Step5
Now add the standard bric form and add two extra fields, and give those fields an ID name (in the black right colomn on the top of blocs)
( in my example I call them start and end )
test form with datepicker
Step6
Test and be happy :-)
Step7
Now its time to adjust it the way you want it but you need to know some CSS.
more info to adjust things you will find here:
http://www.eyecon.ro/bootstrap-datepicker/
Good luck
Sandy