是否可以使用HTML5数据属性初始化Bootstrap 3 Datepicker?

时间:2016-02-04 13:28:00

标签: twitter-bootstrap attributes initialization datetimepicker eonasdan-datetimepicker

目前,我们以半模块化方式使用datetimepicker,因为初始化是在javascript中完成的。以前我们使用的是一个不同的datepicker组件,它缺少时间选择功能,但可以通过数据属性进行初始化。这使事情变得更容易,因为在使用该组件的asp.net MVC 5项目中,我们可以简单地创建一个编辑器模板,只要需要一个日期选择器就可以引用它,而不必编写任何javascript。我想坚持使用这种使用模式,但却未能在the docs中找到有关它的任何文档。我是否遗漏了Bootstrap 3 Datepicker可能会发生的事情?

1 个答案:

答案 0 :(得分:7)

您可以使用数据属性初始化datepicker选项,如以下示例所示:

$('#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>

您可以使用data-date-*设置选项或data-date-options设置选项对象。 data-*初始化,在我看来,它的记录很少,无论如何你都可以找到它的一些参考here