JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 3.8/5 ( 1 votes)
Your Rating:
Add datepicker picker to field or to any other element.
- can be used as a component
- formats: dd, d, mm, m, yyyy, yy
- separators: -, /, .
Using bootstrap-datepicker.js
Call the datepicker via javascript:
$('.datepicker').datepicker()
Options
| Name | type | default | description |
|---|---|---|---|
| format | string | 'mm/dd/yyyy' | the date format, combination of d, dd, m, mm, yy, yyy. |
| weekStart | integer | 0 | day of the week start. 0 for Sunday - 6 for Saturday |
| viewMode | string|integer | 0 = 'days' | set the start view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years |
| minViewMode | string|integer | 0 = 'days' | set a limit for view mode. Accepts: 'days', 'months', 'years', 0 for days, 1 for months and 2 for years |
Markup
Format a component.
<div class="input-append date" id="dp3" data-date="12-02-2012" data-date-format="dd-mm-yyyy"> <input class="span2" size="16" type="text" value="12-02-2012"> <span class="add-on"><i class="icon-th"></i></span> </div>
Methods
.datepicker(options)
Initializes an datepicker.
.datepicker('show')
Show the datepicker.
.datepicker('hide')
Hide the datepicker.
.datepicker('place')
Updates the date picker's position relative to the element
.datepicker('setValue', value)
Set a new value for the datepicker. It cand be a string in the specified format or a Date object.
Events
Datepicker class exposes a few events for manipulating the dates.
| Event | Description |
|---|---|
| show | This event fires immediately when the date picker is displayed. |
| hide | This event is fired immediately when the date picker is hidden. |
| changeDate | This event is fired when the date is changed. |
| onRender | This event is fired when a day is rendered inside the datepicker. Should return a string. Return 'disabled' to disable the day from being selected. |
$('#dp5').datepicker()
.on('changeDate', function(ev){
if (ev.date.valueOf() < startDate.valueOf()){
....
}
});
