Is it possible to use HTML5 Data Attributes to initialize the Bootstrap 3 Datepicker?

Question

At the the moment, we\'re using the datetimepicker in a semi-modular way because the initialization is done in javascript. Formerly we were using a different datepicker comp

Answer 1

You can init datepicker options using data attributes, as you can see in the following example:

$('#datetimepicker1').datetimepicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

<div class="row">
    <div class="col-md-12">
        <div class="form-group">
            <div class="input-group date" >
              <input type='text' class="form-control" id="datetimepicker1" data-date-format="YYYY/MM/DD HH:mm" data-date-show-today-button="true" data-date-show-clear="true"/>
            </div>
        </div>
    </div>

You can use data-date-* to set an option or data-date-options setting an option object. The data-* initialization, in my opinion, it's poorly documented, anyway you can find some reference to it here.