Adding a datepicker for Bootstrap

Bootstrap comes without a datepicker component, so here is my solution.

Installation and configuration

  1. Download bootstrap-datepicker.js plugin by eternicode
  2. Add js/bootstrap-datepicker.js to your <head> code
  3. Add css/datepicker3.css to your <head> code
  4. Locate the js/locales/*.js folder if you need multilingual dates
  5. 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;
  }
}

Categories

Category BootstrapCategory CoffeescriptCategory DrupalCategory GravCategory HTMLCategory JavascriptCategory JoomlaCategory jQueryCategory LaravelCategory MagentoCategory PHPCategory SharePointCategory SpringCategory ThymeleafCategory WordPressCategory Workflow

Comments

Developed and designed by Netgloo
© 2017 Netgloo