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

问题

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 component which lacked the time picking function but could be initialized via data-attributes. This made things a lot easier because in the asp.net MVC 5 project in which that component was used, we could simply create an editor template that was referenced whenever a datepicker was needed, without having to write any javascript. I'd like to stick to that usage pattern but have not been able to find any documentation about it in the docs. Am I missing something or this not (yet) possible with the Bootstrap 3 Datepicker?

回答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.

来源：https://stackoverflow.com/questions/35202298/is-it-possible-to-use-html5-data-attributes-to-initialize-the-bootstrap-3-datepi

标签

twitter-bootstrap

attributes

initialization

datetimepicker

eonasdan-datetimepicker