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

标签 twitter-bootstrap attributes initialization datetimepicker eonasdan-datetimepicker

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

关于twitter-bootstrap - 是否可以使用 HTML5 数据属性来初始化 Bootstrap 3 Datepicker?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35202298/

相关文章:

objective-c - 使用 "id"作为自定义 "init"方法的返回类型而不是指向该类的指针的优点和缺点?

css - Safari/iOS/iPhone 上的 Bootstrap 模式问题

php - 扩展 Magento 的 EAV 属性模型

asp.net-mvc - 使用 ASP.NET MVC 和 MVVM 的页面初始化模式(如 knockoutjs)

Python 实例和属性 : is this a bug or i got it totally wrong?

reflection - 在 F# 中,如何访问函数的属性?

C++:将引用成员初始化为在初始化列表中创建的对象

jquery - Bootstrap-jQuery AJAX 在错误和成功消息上显示 "alert alert-danger"类

css - Bootstrap datepicker 下拉菜单作为输入的 100%

css - Bootstrap 网格系统有条件地 flex col 宽度