nodes-ui/doc/pages/components/forms/date-picker.html

UI Components for Nodes Backends

---
title: Date Picker
layout: nested-component.html
github: components/forms/date-picker.html
---
<h1 id="topOfPage" class="docs--page-header">
    Date Picker
    <a class="docs--third-party-link" href="https://eonasdan.github.io/bootstrap-datetimepicker/" target="_blank">bootstrap-datetimepicker</a>
</h1>

<p class="docs--page-description">
    Full list of options can be found <a href="https://eonasdan.github.io/bootstrap-datetimepicker/Options/" target="_blank">here</a> which can be set by the data-options attribute.<br />
    The date picker component is initialized by <code>.date-picker</code> classname.<br />
    <strong>NOTE: If data-toggle attribute isn't set, the component will default to date and time picker.</strong>
</p>

<form>
    <!-- Date -->
    <h2 id="datepicker" class="docs--section-header">
        Date picker
    </h2>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-toggle="date">
                    <input type="text" name="fooA" class="form-control" placeholder="YYYY-MM-DD" />
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Time -->
    <h2 id="timepicker" class="docs--section-header">
        Time picker
    </h2>
    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-toggle="time">
                    <input type="text" name="fooB" class="form-control" placeholder="HH:mm" />
                    <span class="input-group-addon">
                        <i class="fa fa-clock-o"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Date and time -->
    <h2 id="datetimepicker" class="docs--section-header">
        Date and time picker
    </h2>
    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-toggle="datetime">
                    <input type="text" name="fooC" class="form-control" placeholder="YYYY-MM-DD HH:mm"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>


    <!-- Inline -->
    <h2 id="inline" class="docs--section-header">
        Inline
    </h2>

    <p class="docs--page-description">
        Will display the picker inline without the need of a input field. This will also hide borders and shadows.
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="row">
                    <div class="col-md-8">
                        <div class="date-picker" data-options="{inline: true, sideBySide: true}"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Side by side -->
    <h2 id="sideBySide" class="docs--section-header">
        Side by side
    </h2>

    <p class="docs--section-header">
    <pre>Default: false</pre>
    Shows the picker side by side when using the time and date together.
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-options="{sideBySide: true}">
                    <input type="text" name="fooD" class="form-control" placeholder="YYYY-MM-DD HH:mm" />
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Show Clear -->
    <h2 id="showClear" class="docs--section-header">
        Show Clear
    </h2>

    <p class="docs--section-header">
    <pre>Default: false</pre>
    Specifies if the clear date button will appear on the widget
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-options="{showClear: true}">
                    <input type="text" name="fooE" class="form-control" placeholder="YYYY-MM-DD HH:mm" />
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>


    <!-- Using locales -->
    <h2 id="locale" class="docs--section-header">
        Using locales
    </h2>

    <p class="docs--page-description">
        See <a href="https://github.com/moment/moment/tree/develop/locale">momentjs</a> for valid locales.
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-toggle="datetime" data-options="{locale: 'da'}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Custom formats -->
    <h2 id="format" class="docs--section-header">
        Custom formats
    </h2>

    <p class="docs--section-header">
    <pre>Date default: YYYY-MM-DD</pre>
    <pre>Time default: HH:mm</pre>
    <pre>Date & time default: YYYY-MM-DD HH:mm</pre>
    See <a href="http://momentjs.com/docs/#/displaying/format/">momentjs' docs</a>
    for valid formats. Format also dictates what components are shown, e.g.<code>MM/dd/YYYY</code>
    will not display the time picker. <br />
    <strong>Note</strong>: This is only affecting the "view" value, and NOT the value sent to the backend. Default format sent to the backend is <code>YYYY-MM-DD HH:mm:ss</code> which is not configureable.
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-toggle="datetime" data-options="{format: 'DD/MM/YYYY HH:mm'}">
                    <input type="text" class="form-control" placeholder="DD/MM/YYYY HH:mm"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Parse ISO -->
    <h2 id="parseISO" class="docs--section-header">
        Parse ISO
    </h2>

    <p class="docs--section-header">
    <pre>Default: false</pre>
    Formatting date/datetime for PHP ISO standard.<br />
    <strong>Note</strong>: This is not affecting the "view" value, but only the value sent to the backend <code>format: YYYY-MM-DDTHH:mm:ssZZ</code>
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-toggle="datetime" data-options="{parseISO: true}">
                    <input type="text" class="form-control" placeholder="DD/MM/YYYY HH:mm"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Calendar weeks -->
    <h2 id="calendarWeeks" class="docs--section-header">
        Calendar weeks
    </h2>

    <p class="docs--section-header">
        <pre>Default: false</pre>
        Shows the week of the year to the left of first day of the week.
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-options="{calendarWeeks: true}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm" />
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Min date -->
    <h2 id="minDate" class="docs--section-header">
        Min date
    </h2>

    <p class="docs--section-header">
    <pre>Default: false</pre>
    Prevents date/time selections before this date.<br />
    <strong><code>minDate</code> will override <code>defaultDate</code> and <code>useCurrent</code> if either of these settings are
        the same day since both options are invalid according to the rules you've selected.</strong>
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-options="{minDate: '2016-02-22'}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm" />
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Max date -->
    <h2 id="maxDate" class="docs--section-header">
        Max date
    </h2>

    <p class="docs--section-header">
    <pre>Default: false</pre>
    Prevents date/time selections before this date.<br />
    <strong><code>maxDate</code> will override <code>defaultDate</code> and <code>useCurrent</code> if either of these settings are
        the same day since both options are invalid according to the rules you've selected.</strong>
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-options="{maxDate: '2016-02-22'}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm" />
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Keep open -->
    <h2 id="keepOpen" class="docs--section-header">
        Keep open
    </h2>

    <p class="docs--section-header">
    <pre>Default: false</pre>
    Will cause the date picker to stay open after selecting a date if no time components are being used.
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-options="{keepOpen: true}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm" />
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Tooltips -->
    <h2 id="tooltips" class="docs--section-header">
        Tooltips
    </h2>

    <p class="docs--section-header">
        <pre>
        defaults: {
            today: 'Go to today',
            clear: 'Clear selection',
            close: 'Close the picker',
            selectMonth: 'Select Month',
            prevMonth: 'Previous Month',
            nextMonth: 'Next Month',
            selectYear: 'Select Year',
            prevYear: 'Previous Year',
            nextYear: 'Next Year',
            selectDecade: 'Select Decade',
            prevDecade: 'Previous Decade',
            nextDecade: 'Next Decade',
            prevCentury: 'Previous Century',
            nextCentury: 'Next Century'
        }</pre>
    This will change the <code>tooltips</code> over each icon to a custom string
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-options="{tooltips: {nextMonth: 'Næste måned'}}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- No icon (input field only) -->
    <h2 id="noIcon" class="docs--section-header">
        No icon (input fields only)
    </h2>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <label for="exampleInputName">Date and Time:</label>
                <input type="text" class="form-control date-picker" id="exampleInputName" placeholder="YYYY-MM-DD HH:mm">
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Disabled dates -->
    <h2 id="disabledDates" class="docs--section-header">
        Disabled dates
    </h2>

    <p class="docs--section-header">
        <pre>
        Default: false
        Accepts: array of dates [string]</pre>
        Disables selection of dates in the array, e.g. holidays
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-options="{disabledDates: ['2016-01-01']}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Disabled days of the week -->
    <h2 id="disabledDaysOfTheWeek" class="docs--section-header">
        Disabled days of the week
    </h2>

    <p class="docs--section-header">
        <pre>
        Default: []
        Accepts: array of numbers from 0-6</pre>
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-options="{daysOfWeekDisabled: [0,6]}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Custom icons -->
    <h2 id="icons" class="docs--section-header">
        Custom icons
    </h2>
    <p class="docs--page-description">
        You can configure following icons, and available icons can be found
        <a href="https://fortawesome.github.io/Font-Awesome/icons/">here</a>
        <pre>
        Defaults: {
            time: 'fa fa-clock-o',
            date: 'fa fa-calendar',
            up: 'fa fa-arrow-up',
            down: 'fa fa-arrow-down',
            previous: 'fa fa-arrow-left',
            next: 'fa fa-arrow-right',
            today: 'fa fa-calendar-times-o',
            clear: 'fa fa-trash',
            close: 'fa fa-times'
        }
        </pre>
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-toggle="datetime" data-options="{icons: {time: 'fa fa-clock-o'}}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- Default date -->
    <h2 id="defaultDate" class="docs--section-header">
        Default date
    </h2>

    <p class="docs--section-header">
        Sets the picker default date/time. Overrides <code>useCurrent</code>
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-toggle="date" data-options="{defaultDate: '2016-02-22'}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm" />
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>

    <!-- View mode -->
    <h2 id="viewMode" class="docs--section-header">
        View mode
    </h2>

    <p class="docs--section-header">
        <pre>
    Default: 'days'
    Accepts: 'decades','years','months','days'</pre>
        The default view to display when the picker is shown.<br />
        <strong>Note</strong>: To limit the picker to selecting, for instance the year and month, use <code>format: MM/YYYY</code>
    </p>

    <div class="docs--code-example">
        <div class="docs--code-example__output">
            <div class="form-group">
                <div class="input-group date-picker" data-toggle="datetime" data-options="{viewMode: 'years'}">
                    <input type="text" class="form-control" placeholder="YYYY-MM-DD HH:mm"/>
                    <span class="input-group-addon">
                        <i class="fa fa-calendar"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="docs--code-example__code">
            <p class="docs--code-example__loader">Loading...</p>
            <div class="btn-group btn-group-justified docs--code-example__code-blocks-navigation" role="tablist">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default active" aria-controls="lol" role="tab" data-toggle="tab" data-target="#outputHTML">HTML</button>
                </div>
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-default" aria-controls="blade" role="tab" data-toggle="tab" data-target="#outputBLADE">BLADE</button>
                </div>
            </div>
            <div class="tab-content docs--code-example__code-blocks">
                <div  role="tabpanel" data-lang="markup" class="docs--code-example__code-block tab-pane active" id="outputHTML"><pre><code class="lang-html"></code></pre></div>
                <div  role="tabpanel" data-lang="php" class="docs--code-example__code-block tab-pane" id="outputBLADE">
<pre><code class="language-php">NYI
</code></pre>
                </div>
            </div>
            <button type="button" class="btn btn-default btn-block btn-sm docs--code-example__copy-code">Copy to clipboard</button>
        </div>
    </div>
</form>