6.3. Datetimepicker Loader

Initializes Bootstrap Datetimepicker by Jonathan Peterson on the given form field. It does no more than run the $.datetimepicker() method with an optional configuration object as its argument.

JavaScript Required

Scripts datetimepicker-loader.js, moment.js (optionaly with locales, before bootstrap.js) and bootstrap-datetimepicker.js must be included.

Usage

This loader only calls the jQuery plugin defined in bootstrap-datetimepicker component. If the lang attribute is set on the <html> element the datetimepicker is localized accordingly.

Data-API

If an input group has the attribute data-onload-datetimepicker defined, it will be initialized with a datetimepicker upon page load. The picker can be configured by the value passed to the attribute. If no value is passed, the picker is initiated with default configuration. If the value is a valid JSON, then it will be parsed and used as a configuration object (see http://eonasdan.github.io/bootstrap-datetimepicker/Options for supported options).

Example

<div class="row">
    <div class="col-md-6">
        <div class="form-group">
            <label>Default configuration</label>
            <div class="input-group date" data-onload-datetimepicker>
                <input type="text" class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                </span>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="form-group">
            <label>Custom format and localization</label>
            <div class="input-group date" data-onload-datetimepicker='{"locale": "cs", "format": "D. M. YYYY"}'>
                <input type="text" class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                </span>
            </div>
        </div>
    </div>
</div>