Adding a datepicker for Bootstrap
Bootstrap comes without a datepicker component, so here is my solution.
Installation and configuration
- Download bootstrap-datepicker.js plugin by eternicode
- Add js/bootstrap-datepicker.js to your <head> code
- Add css/datepicker3.css to your <head> code
- Locate the js/locales/*.js folder if you need multilingual dates
- Now you can use this awesome sandbox to create your own script
For example:
HTML
<input class="form-control" type="text" />
JS
$('input').datepicker({
format:"dd/mm/yyyy",
weekStart:0,
startDate:"0d",
todayBtn:"linked",
language:"it",
autoclose:true,
todayHighlight:true
});
Overriding colors (LESS)
// Today
.datepicker table tr td.today{
color: #000;
background-color: greenyellow;
border-color: #FFF;
&:hover:hover{
background-color: #EEE;
}
}
// Active (selected day)
.datepicker table tr td.active.active{
background-color: green;
border-color: #FFF;
&:hover{
background-color: green;
}
}