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

26

27

28

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

30

2
7/8

4/11/2015

Bootstrap3Datepicker

10

41

PM

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>

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

8/8