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

问题描述

目前，我们以半模块化方式使用 datetimepicker ，因为初始化是在javascript中完成的.以前，我们使用的是不同的datepicker组件，该组件缺少时间选择功能，但可以通过数据属性进行初始化.这使事情变得容易得多，因为在使用该组件的asp.net MVC 5项目中，我们可以简单地创建一个编辑器模板，该模板在需要日期选择器时就被引用，而无需编写任何JavaScript.我想坚持使用该使用模式，但无法在文档中找到有关此使用模式的任何文档.我是否缺少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?

推荐答案

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

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>

您可以使用data-date-*设置选项或data-date-options设置选项对象.在我看来，data-*初始化的文献不多，无论如何您都可以找到对其的引用这里.

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.

这篇关于是否可以使用HTML5数据属性初始化Bootstrap 3 Datepicker?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！