#Bootstrap 3 Datepicker v4 Docs <div class="alert alert-info"> <strong>Note</strong> All functions are accessed via the <code>data</code> attribute e.g. <code>$('#datetimepicker').data("DateTimePicker").FUNCTION()</code> </div> ### Minimum Setup <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script> </div> </div> #### Code ``` <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker1'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker1').datetimepicker(); }); </script> </div> </div> ``` ---------------------- ### Using Locales <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker2').datetimepicker({ locale: 'ru' }); }); </script> </div> </div> #### Code ``` <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker2').datetimepicker({ locale: 'ru' }); }); </script> </div> </div> ``` ---------------------- ### Time Only <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker3'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker3').datetimepicker({ format: 'LT' }); }); </script> </div> </div> #### Code ``` <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker3'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker3').datetimepicker({ format: 'LT' }); }); </script> </div> </div> ``` ---------------------- ### Date Only <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker3'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker3').datetimepicker({ format: 'L' }); }); </script> </div> </div> #### Code ``` <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker3'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-time"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker3').datetimepicker({ format: 'LT' }); }); </script> </div> </div> ``` ---------------------- ### No Icon (input field only): <div class="container"> <div class="row"> <div class='col-sm-6'> <input type='text' class="form-control" id='datetimepicker4' /> </div> <script type="text/javascript"> $(function () { $('#datetimepicker4').datetimepicker(); }); </script> </div> </div> #### Code ``` <div class="container"> <div class="row"> <div class='col-sm-6'> <input type='text' class="form-control" id='datetimepicker4' /> </div> <script type="text/javascript"> $(function () { $('#datetimepicker4').datetimepicker(); }); </script> </div> </div> ``` ---------------------- ### Enabled/Disabled Dates <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker5'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: "11/1/2013", disabledDates: [ moment("12/25/2013"), new Date(2013, 11 - 1, 21), "11/22/2013 00:53" ] }); }); </script> </div> </div> #### Code ``` <div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker5'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: "11/1/2013", disabledDates: [ moment("12/25/2013"), new Date(2013, 11 - 1, 21), "11/22/2013 00:53" ] }); }); </script> </div> </div> ``` ---------------------- ### Linked Pickers <div class="container"> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker6'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker7'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker6').datetimepicker(); $('#datetimepicker7').datetimepicker({ useCurrent: false }); $("#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> #### Code ``` <div class="container"> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker6'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <div class='col-md-5'> <div class="form-group"> <div class='input-group date' id='datetimepicker7'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker6').datetimepicker(); $('#datetimepicker7').datetimepicker({ useCurrent: false //Important! See issue #1075 }); $("#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> ``` ---------------------- ### Custom Icons <div class="container"> <div class="col-sm-6" style="height:130px;"> <div class="form-group"> <div class='input-group date' id='datetimepicker8'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="fa fa-calendar"> </span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker8').datetimepicker({ icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-arrow-up", down: "fa fa-arrow-down" } }); }); </script> </div> #### Code ``` <div class="container"> <div class="col-sm-6" style="height:130px;"> <div class="form-group"> <div class='input-group date' id='datetimepicker8'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="fa fa-calendar"> </span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker8').datetimepicker({ icons: { time: "fa fa-clock-o", date: "fa fa-calendar", up: "fa fa-arrow-up", down: "fa fa-arrow-down" } }); }); </script> </div> ``` ---------------------- ### View Mode <div class="container"> <div class="col-sm-6" style="height:130px;"> <div class="form-group"> <div class='input-group date' id='datetimepicker9'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"> </span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker9').datetimepicker({ viewMode: 'years' }); }); </script> </div> #### Code ``` <div class="container"> <div class="col-sm-6" style="height:130px;"> <div class="form-group"> <div class='input-group date' id='datetimepicker9'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"> </span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker9').datetimepicker({ viewMode: 'years' }); }); </script> </div> ``` ---------------------- ### Min View Mode <div class="container"> <div class="col-sm-6" style="height:130px;"> <div class="form-group"> <div class='input-group date' id='datetimepicker10'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"> </span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker10').datetimepicker({ viewMode: 'years', format: 'MM/YYYY' }); }); </script> </div> #### Code ``` <div class="container"> <div class="col-sm-6" style="height:130px;"> <div class="form-group"> <div class='input-group date' id='datetimepicker10'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"> </span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker10').datetimepicker({ viewMode: 'years', format: 'MM/YYYY' }); }); </script> </div> ``` ---------------------- ### Disabled Days of the Week <div class="container"> <div class="col-sm-6" style="height:130px;"> <div class="form-group"> <div class='input-group date' id='datetimepicker11'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"> </span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker11').datetimepicker({ daysOfWeekDisabled: [0, 6] }); }); </script> </div> #### Code ``` <div class="container"> <div class="col-sm-6" style="height:130px;"> <div class="form-group"> <div class='input-group date' id='datetimepicker11'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"> </span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker11').datetimepicker({ daysOfWeekDisabled: [0, 6] }); }); </script> </div> ``` ---------------------- ### Inline <div style="overflow:hidden;"> <div class="form-group"> <div class="row"> <div class="col-md-8"> <div id="datetimepicker12"></div> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker12').datetimepicker({ inline: true, sideBySide: true }); }); </script> </div> #### Code ``` <div style="overflow:hidden;"> <div class="form-group"> <div class="row"> <div class="col-md-8"> <div id="datetimepicker12"></div> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker12').datetimepicker({ inline: true, sideBySide: true }); }); </script> </div> ```