<form method="POST">
    <h3>Editing: index.md</h3>
    <textarea name="content" rows="20" cols="80">#Bootstrap 3 Datepicker v4 Docs

&lt;div class=&quot;alert alert-info&quot;&gt;
    &lt;strong&gt;Note&lt;/strong&gt;
    All functions are accessed via the &lt;code&gt;data&lt;/code&gt; attribute e.g. &lt;code&gt;$('#datetimepicker').data(&quot;DateTimePicker&quot;).FUNCTION()&lt;/code&gt;
&lt;/div&gt;

### Minimum Setup

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class='input-group date' id='datetimepicker1'&gt;
                    &lt;input type='text' class=&quot;form-control&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;

#### Code

```
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class='input-group date' id='datetimepicker1'&gt;
                    &lt;input type='text' class=&quot;form-control&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;
```

----------------------

### Using Locales

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class='input-group date' id='datetimepicker2'&gt;
                    &lt;input type='text' class=&quot;form-control&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;

#### Code

```
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class='input-group date' id='datetimepicker2'&gt;
                    &lt;input type='text' class=&quot;form-control&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;
```

----------------------

### Time Only

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class='input-group date' id='datetimepicker3'&gt;
                    &lt;input type='text' class=&quot;form-control&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-time&quot;&gt;&lt;/span&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'LT'
                });
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;

#### Code

```
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class='input-group date' id='datetimepicker3'&gt;
                    &lt;input type='text' class=&quot;form-control&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-time&quot;&gt;&lt;/span&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'LT'
                });
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;
```

----------------------

### Date Only

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class='input-group date' id='datetimepicker3'&gt;
                    &lt;input type='text' class=&quot;form-control&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-time&quot;&gt;&lt;/span&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'L'
                });
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;

#### Code

```
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class='input-group date' id='datetimepicker3'&gt;
                    &lt;input type='text' class=&quot;form-control&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-time&quot;&gt;&lt;/span&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker3').datetimepicker({
                    format: 'LT'
                });
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;
```

----------------------

### No Icon (input field only):

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;input type='text' class=&quot;form-control&quot; id='datetimepicker4' /&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker4').datetimepicker();
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;

#### Code

```

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;input type='text' class=&quot;form-control&quot; id='datetimepicker4' /&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker4').datetimepicker();
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;
```

----------------------

### Enabled/Disabled Dates

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class='input-group date' id='datetimepicker5'&gt;
                    &lt;input type='text' class=&quot;form-control&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker5').datetimepicker({
                    defaultDate: &quot;11/1/2013&quot;,
                    disabledDates: [
                        moment(&quot;12/25/2013&quot;),
                        new Date(2013, 11 - 1, 21),
                        &quot;11/22/2013 00:53&quot;
                    ]
                });
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;

#### Code

```
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
        &lt;div class='col-sm-6'&gt;
            &lt;div class=&quot;form-group&quot;&gt;
                &lt;div class='input-group date' id='datetimepicker5'&gt;
                    &lt;input type='text' class=&quot;form-control&quot; /&gt;
                    &lt;span class=&quot;input-group-addon&quot;&gt;
                        &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
            $(function () {
                $('#datetimepicker5').datetimepicker({
                    defaultDate: &quot;11/1/2013&quot;,
                    disabledDates: [
                        moment(&quot;12/25/2013&quot;),
                        new Date(2013, 11 - 1, 21),
                        &quot;11/22/2013 00:53&quot;
                    ]
                });
            });
        &lt;/script&gt;
    &lt;/div&gt;
&lt;/div&gt;
```

----------------------

### Linked Pickers

&lt;div class=&quot;container&quot;&gt;
    &lt;div class='col-md-5'&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker6'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='col-md-5'&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker7'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    $(function () {
        $('#datetimepicker6').datetimepicker();
        $('#datetimepicker7').datetimepicker({
			useCurrent: false
		});
        $(&quot;#datetimepicker6&quot;).on(&quot;dp.change&quot;, function (e) {
            $('#datetimepicker7').data(&quot;DateTimePicker&quot;).minDate(e.date);
        });
        $(&quot;#datetimepicker7&quot;).on(&quot;dp.change&quot;, function (e) {
            $('#datetimepicker6').data(&quot;DateTimePicker&quot;).maxDate(e.date);
        });
    });
&lt;/script&gt;

#### Code

```
&lt;div class=&quot;container&quot;&gt;
    &lt;div class='col-md-5'&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker6'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='col-md-5'&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker7'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;&lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    $(function () {
        $('#datetimepicker6').datetimepicker();
        $('#datetimepicker7').datetimepicker({
			useCurrent: false //Important! See issue #1075
		});
        $(&quot;#datetimepicker6&quot;).on(&quot;dp.change&quot;, function (e) {
            $('#datetimepicker7').data(&quot;DateTimePicker&quot;).minDate(e.date);
        });
        $(&quot;#datetimepicker7&quot;).on(&quot;dp.change&quot;, function (e) {
            $('#datetimepicker6').data(&quot;DateTimePicker&quot;).maxDate(e.date);
        });
    });
&lt;/script&gt;
```

----------------------

### Custom Icons

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot; style=&quot;height:130px;&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker8'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;fa fa-calendar&quot;&gt;
                    &lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('#datetimepicker8').datetimepicker({
                icons: {
                    time: &quot;fa fa-clock-o&quot;,
                    date: &quot;fa fa-calendar&quot;,
                    up: &quot;fa fa-arrow-up&quot;,
                    down: &quot;fa fa-arrow-down&quot;
                }
            });
        });
    &lt;/script&gt;
&lt;/div&gt;

#### Code

```
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot; style=&quot;height:130px;&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker8'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;fa fa-calendar&quot;&gt;
                    &lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('#datetimepicker8').datetimepicker({
                icons: {
                    time: &quot;fa fa-clock-o&quot;,
                    date: &quot;fa fa-calendar&quot;,
                    up: &quot;fa fa-arrow-up&quot;,
                    down: &quot;fa fa-arrow-down&quot;
                }
            });
        });
    &lt;/script&gt;
&lt;/div&gt;
```

----------------------

### View Mode

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot; style=&quot;height:130px;&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker9'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;
                    &lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('#datetimepicker9').datetimepicker({
                viewMode: 'years'
            });
        });
    &lt;/script&gt;
&lt;/div&gt;

#### Code

```
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot; style=&quot;height:130px;&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker9'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;
                    &lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('#datetimepicker9').datetimepicker({
                viewMode: 'years'
            });
        });
    &lt;/script&gt;
&lt;/div&gt;
```

----------------------

### Min View Mode

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot; style=&quot;height:130px;&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker10'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;
                    &lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('#datetimepicker10').datetimepicker({
                viewMode: 'years',
                format: 'MM/YYYY'
            });
        });
    &lt;/script&gt;
&lt;/div&gt;

#### Code

```
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot; style=&quot;height:130px;&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker10'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;
                    &lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('#datetimepicker10').datetimepicker({
                viewMode: 'years',
                format: 'MM/YYYY'
            });
        });
    &lt;/script&gt;
&lt;/div&gt;

```

----------------------

### Disabled Days of the Week

&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot; style=&quot;height:130px;&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker11'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;
                    &lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('#datetimepicker11').datetimepicker({
                daysOfWeekDisabled: [0, 6]
            });
        });
    &lt;/script&gt;
&lt;/div&gt;

#### Code

```
&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;col-sm-6&quot; style=&quot;height:130px;&quot;&gt;
        &lt;div class=&quot;form-group&quot;&gt;
            &lt;div class='input-group date' id='datetimepicker11'&gt;
                &lt;input type='text' class=&quot;form-control&quot; /&gt;
                &lt;span class=&quot;input-group-addon&quot;&gt;
                    &lt;span class=&quot;glyphicon glyphicon-calendar&quot;&gt;
                    &lt;/span&gt;
                &lt;/span&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('#datetimepicker11').datetimepicker({
                daysOfWeekDisabled: [0, 6]
            });
        });
    &lt;/script&gt;
&lt;/div&gt;
```

----------------------

### Inline

&lt;div style=&quot;overflow:hidden;&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-8&quot;&gt;
                &lt;div id=&quot;datetimepicker12&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('#datetimepicker12').datetimepicker({
                inline: true,
                sideBySide: true
            });
        });
    &lt;/script&gt;
&lt;/div&gt;

#### Code

```
&lt;div style=&quot;overflow:hidden;&quot;&gt;
    &lt;div class=&quot;form-group&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-md-8&quot;&gt;
                &lt;div id=&quot;datetimepicker12&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;
        $(function () {
            $('#datetimepicker12').datetimepicker({
                inline: true,
                sideBySide: true
            });
        });
    &lt;/script&gt;
&lt;/div&gt;
```</textarea><br>
    <input type="submit" value="Save">
</form>