bootstrap-datepicker¶
Bootstrap-datepicker provides a flexible datepicker widget in the Bootstrap style.
![_images/demo_head.png](_images/demo_head.png)
This is a fork of Stefan Petre’s original code; thanks go to him for getting this thing started!
Please note that this fork is not used on Stefan’s page at this time, nor is it maintained or contributed to by him.
Versions are incremented according to semver.
Requirements¶
These are the specific versions bootstrap-datepicker is tested against (js
files) and built against (css
files). Use other versions at your own risk.
Dependencies¶
Requires bootstrap’s dropdown component (dropdowns.less
) for some styles, and bootstrap’s sprites (sprites.less
and associated images) for arrows.
A standalone .css file (including necessary dropdown styles and alternative, text-based arrows) can be generated by running build/build_standalone.less
through the lessc
compiler:
$ lessc build/build_standalone.less datepicker.css
Usage¶
Call the datepicker via javascript:
$('.datepicker').datepicker();
Data API¶
As with bootstrap’s own plugins, datepicker provides a data-api that can be used to instantiate datepickers without the need for custom javascript. For most datepickers, simply set data-provide="datepicker"
on the element you want to initialize, and it will be intialized lazily, in true bootstrap fashion. For inline datepickers, use data-provide="datepicker-inline"
; these will be immediately initialized on page load, and cannot be lazily loaded.
<input data-provide="datepicker">
Markup with component
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
You can disable datepicker’s data-api in the same way as you would disable other bootstrap plugins:
$(document).off('.datepicker.data-api');
Configuration¶
Options are passed to the datepicker
function via an options hash at instantiation:
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: '-3d'
});
Most options may be provided as data-attributes on the target element:
<input class="datepicker" data-date-format="mm/dd/yyyy">
$('.datepicker').datepicker({
startDate: '-3d'
});
Defaults for all options can be modified directly by changing values in the $.fn.datepicker.defaults
hash:
$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$('.datepicker').datepicker({
startDate: '-3d'
});
Stylesheets¶
There are a few different stylesheets included in the library. This is an overview of what each file is to be used for:
bootstrap-datepicker.css
gives legacy support for twitter bootstrap v2, bootstrap-datepicker3.css
is used for twitter bootstrap v3 support
and bootstrap-datepicker.standalone.css
can be used the include the datepicker without depending on the twitter bootstrap library.
No Conflict mode¶
$.fn.datepicker.noConflict
provides a way to avoid conflict with other jQuery datepicker plugins:
var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
$.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functionality
Table of Contents¶
- Markup
- Options
- autoclose
- beforeShowDay
- beforeShowMonth
- beforeShowYear
- beforeShowDecade
- beforeShowCentury
- calendarWeeks
- clearBtn
- container
- datesDisabled
- daysOfWeekDisabled
- daysOfWeekHighlighted
- defaultViewDate
- disableTouchKeyboard
- enableOnReadonly
- endDate
- forceParse
- assumeNearbyYear
- format
- immediateUpdates
- inputs
- keyboardNavigation
- language
- maxViewMode
- minViewMode
- multidate
- multidateSeparator
- orientation
- showOnFocus
- startDate
- startView
- templates
- title
- todayBtn
- todayHighlight
- toggleActive
- weekStart
- zIndexOffset
- Methods
- Events
- Keyboard support
- I18N