Important! Please read this blog post

# Bootstrap 3 Datepicker v4 Docs

### Get awesome Dashboard Templates

Looking for a template with the datepicker ready to go? Then get check out these templates from our partners.

### Creative Tim

Material Dashboard Pro
Gaia Bootstrap Template Pro
Light Bootstrap Dashboard PRO React

### Flatlogic

Light Blue Html5
Sing App Html5
Flatlogic One Bootstrap Template

Note All functions are accessed via the `data` attribute e.g. `$('#datetimepicker').data("DateTimePicker").FUNCTION()`

### Minimum Setup

#### 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

#### 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

#### 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

#### 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):

#### 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

#### 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

#### 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

#### 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

#### 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

#### 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

#### 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

#### 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>