是否可以使用 HTML5 数据属性来初始化 Bootstrap 3 Datepicker? [英] Is it possible to use HTML5 Data Attributes to initialize the Bootstrap 3 Datepicker?

问题描述

目前，我们以半模块化方式使用 datetimepicker，因为初始化是在javascript中完成的.以前我们使用不同的日期选择器组件，它缺少时间选择功能，但可以通过数据属性进行初始化.这让事情变得容易多了，因为在使用该组件的 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?

推荐答案

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

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?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！