0% found this document useful (0 votes)

133 views

Bootstrap 3 Datepicker v4 Docs: Bootstrap 3 Datepicker Installing Functions Options Events Change Log Dev Guide

The document discusses Bootstrap 3 Datepicker, a date and time picker plugin for Bootstrap. It provides documentation on minimum setup, localization, custom formats, disabling icons, linking pickers, customizing views and icons, and disabling specific days of the week. Code examples are provided for each functionality.

Uploaded by

Carlos Augusto Nole Machaca

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

133 views

Bootstrap 3 Datepicker v4 Docs: Bootstrap 3 Datepicker Installing Functions Options Events Change Log Dev Guide

Uploaded by

Carlos Augusto Nole Machaca

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 8

4/11/2015

Bootstrap3Datepicker

Bootstrap3Datepicker
Installing
Functions
Options
Events
ChangeLog
DevGuide
Extras
GitHub

Bootstrap3Datepickerv4Docs
MinimumSetup
UsingLocales
CustomFormats
NoIcon(inputfieldonly):
Enabled/DisabledDates
LinkedPickers
CustomIcons
ViewMode
MinViewMode
DisabledDaysoftheWeek
Inline

Bootstrap3Datepickerv4Docs
NoteAllfunctionsareaccessedviathedataattributee.g.
$('#datetimepicker6').data("DateTimePicker").FUNCTION()

MinimumSetup

http://eonasdan.github.io/bootstrapdatetimepicker/

1/8

4/11/2015

Bootstrap3Datepicker

Code
<divclass="container">
<divclass="row">
<divclass='colsm6'>
<divclass="formgroup">
<divclass='inputgroupdate'id='datetimepicker1'>
<inputtype='text'class="formcontrol"/>
<spanclass="inputgroupaddon">
<spanclass="glyphiconglyphiconcalendar"></span>
</span>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker1').datetimepicker();
});
</script>
</div>
</div>

UsingLocales

Code
<divclass="container">
<divclass="row">
<divclass='colsm6'>
<divclass="formgroup">
<divclass='inputgroupdate'id='datetimepicker2'>
<inputtype='text'class="formcontrol"/>
<spanclass="inputgroupaddon">
<spanclass="glyphiconglyphiconcalendar"></span>
</span>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker2').datetimepicker({
locale:'ru'
});
});
</script>
</div>
</div>

CustomFormats

http://eonasdan.github.io/bootstrapdatetimepicker/

2/8

4/11/2015

Bootstrap3Datepicker

Code
<divclass="container">
<divclass="row">
<divclass='colsm6'>
<divclass="formgroup">
<divclass='inputgroupdate'id='datetimepicker3'>
<inputtype='text'class="formcontrol"/>
<spanclass="inputgroupaddon">
<spanclass="glyphiconglyphicontime"></span>
</span>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker3').datetimepicker({
format:'LT'
});
});
</script>
</div>
</div>

NoIcon(inputfieldonly):

Code
<divclass="container">
<divclass="row">
<divclass='colsm6'>
<inputtype='text'class="formcontrol"id='datetimepicker4'/>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker4').datetimepicker();
});
</script>
</div>
</div>

Enabled/DisabledDates
11/01/201312:00AM

Code
<divclass="container">
<divclass="row">
<divclass='colsm6'>
http://eonasdan.github.io/bootstrapdatetimepicker/

3/8

4/11/2015

Bootstrap3Datepicker

<divclass="formgroup">
<divclass='inputgroupdate'id='datetimepicker5'>
<inputtype='text'class="formcontrol"/>
<spanclass="inputgroupaddon">
<spanclass="glyphiconglyphiconcalendar"></span>
</span>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker5').datetimepicker({
defaultDate:"11/1/2013",
disabledDates:[
moment("12/25/2013"),
newDate(2013,111,21),
"11/22/201300:53"
]
});
});
</script>
</div>
</div>

LinkedPickers

Code
<divclass="container">
<divclass='colmd5'>
<divclass="formgroup">
<divclass='inputgroupdate'id='datetimepicker6'>
<inputtype='text'class="formcontrol"/>
<spanclass="inputgroupaddon">
<spanclass="glyphiconglyphiconcalendar"></span>
</span>
</div>
</div>
</div>
<divclass='colmd5'>
<divclass="formgroup">
<divclass='inputgroupdate'id='datetimepicker7'>
<inputtype='text'class="formcontrol"/>
<spanclass="inputgroupaddon">
<spanclass="glyphiconglyphiconcalendar"></span>
</span>
</div>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker();
http://eonasdan.github.io/bootstrapdatetimepicker/

4/8

4/11/2015

Bootstrap3Datepicker

$("#datetimepicker6").on("dp.change",function(e){
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change",function(e){
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>

CustomIcons

Code
<divclass="container">
<divclass="colsm6"style="height:130px;">
<divclass="formgroup">
<divclass='inputgroupdate'id='datetimepicker8'>
<inputtype='text'class="formcontrol"/>
<spanclass="inputgroupaddon">
<spanclass="fafacalendar">
</span>
</span>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker8').datetimepicker({
icons:{
time:"fafaclocko",
date:"fafacalendar",
up:"fafaarrowup",
down:"fafaarrowdown"
}
});
});
</script>
</div>

ViewMode

http://eonasdan.github.io/bootstrapdatetimepicker/

5/8

4/11/2015

Bootstrap3Datepicker

Code
<divclass="container">
<divclass="colsm6"style="height:130px;">
<divclass="formgroup">
<divclass='inputgroupdate'id='datetimepicker9'>
<inputtype='text'class="formcontrol"/>
<spanclass="inputgroupaddon">
<spanclass="glyphiconglyphiconcalendar">
</span>
</span>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker9').datetimepicker({
viewMode:'years'
});
});
</script>
</div>

MinViewMode

Code
<divclass="container">
<divclass="colsm6"style="height:130px;">
<divclass="formgroup">
<divclass='inputgroupdate'id='datetimepicker10'>
<inputtype='text'class="formcontrol"/>
<spanclass="inputgroupaddon">
<spanclass="glyphiconglyphiconcalendar">
</span>
</span>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker10').datetimepicker({
viewMode:'years',
http://eonasdan.github.io/bootstrapdatetimepicker/

6/8

4/11/2015

Bootstrap3Datepicker

format:'MM/YYYY'
});
});
</script>
</div>

DisabledDaysoftheWeek

Code
<divclass="container">
<divclass="colsm6"style="height:130px;">
<divclass="formgroup">
<divclass='inputgroupdate'id='datetimepicker11'>
<inputtype='text'class="formcontrol"/>
<spanclass="inputgroupaddon">
<spanclass="glyphiconglyphiconcalendar">
</span>
</span>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker11').datetimepicker({
daysOfWeekDisabled:[0,6]
});
});
</script>
</div>

Inline
Su
29
5
12
19

Mo
30
6
13
20

Tu
31
7
14
21

http://eonasdan.github.io/bootstrapdatetimepicker/

April2015
We
1
8
15
22
29

Th
2
9
16
23

Fr
3
10
17
24

Sa
4
11
18
25

2
7/8

4/11/2015

Bootstrap3Datepicker

Code
<divclass="container">
<divclass="colsm6">
<divclass="formgroup">
<divclass="row">
<divclass="colmd8">
<divid="datetimepicker12"></div>
</div>
</div>
</div>
</div>
<scripttype="text/javascript">
$(function(){
$('#datetimepicker12').datetimepicker({
inline:true,
sideBySide:true
});
});
</script>
</div>