Twitter Bootstrap日期选择器

Question

Twitter Bootstrap日期选择器

San*_*and 54 datepicker twitter-bootstrap bootstrap-datepicker

我如何使用Twitter Bootstrap日期选择器？我使用下面的代码,但它不起作用.

<html>
    <head>
    <title>DatePicker Demo</title>
    <script src="js/jquery-1.7.1.js"></script>
    <link href="css/datepicker.less" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/bootstrap-datepicker.js"></script>

    </script>
    </head>
    <body>
    <form >
        <div class="input">
            <input class="small" type="text" value="01/05/2011" data-datepicker="datepicker">
        </div>
    </form>

    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Jos*_*art 68

目前最流行的bootstrap日期选择器:https://github.com/eternicode/bootstrap-datepicker (感谢@dentarg挖掘它)

简单的实例化只需要:

HTML

<input class="datepicker">

Run Code Online (Sandbox Code Playgroud)

使用Javascript

$('.datepicker').datepicker();

Run Code Online (Sandbox Code Playgroud)

在这里查看一个简单的示例https://jsfiddle.net/k6qsm5no/1/或这里的完整文档http://bootstrap-datepicker.readthedocs.org/en/latest/

Answer 2

Mar*_*ery 30

很多混乱源于至少有三个名为bootstrap-datepicker的主要库的存在:

Andrew'eternicode'Rowls的一个流行的eyecon's datepicker前叉(使用这个!):
Stefan'eyecon'Petre的原始版本,仍可在http://www.eyecon.ro/bootstrap-datepicker/上找到
一个完全不相关的datepicker小部件,'storborg' 试图合并到bootstrap中.它没有合并,也没有创建适当的小部件发布版本.

如果您正在开始一个新项目 - 或者说,即使您使用eyecon版本接管一个旧项目 - 我建议您使用eternicode的版本,而不是eyecon.最初的eyecon版本在功能和文档方面都是完全劣质的,这不太可能改变 - 它自2013年3月以来一直没有更新.

您可以在演示页面上看到eternicode datepicker的大多数功能,这些功能允许您使用datepicker的配置并观察结果.有关更多详细信息,请参阅简洁但全面的文档,您可以在一小时内完整地使用它们.

但是,如果你不耐烦,这里是一个非常简短的逐步指南,指向datepicker最简单和最常见的用例.

快速入门指南

在您的页面上包括以下库(此处提到的最低版本):
- jQuery的
- Bootstrap - JS和CSS
- 最新发布的bootstrap-datepicker版本 - JS和CSS
input在某个地方放置一个元素,例如
```
<input id="my-date-input">
```
Run Code Online (Sandbox Code Playgroud)
使用jQuery,选择您的输入并调用.datepicker()方法:
```
jQuery('#my-date-input').datepicker();
```
Run Code Online (Sandbox Code Playgroud)
加载页面并单击或选项卡到input元素中.将出现一个日期选择器:

Answer 3

Mic*_*ael 16

Twitter Bootstrap目前与jQuery UI样式不兼容.

https://github.com/twitter/bootstrap/issues/156

这可以帮助你https://github.com/sferik/rails_admin(http://rails-admin-tb.herokuapp.com/admin/drafts/new)

问题是关于bootstrap-datepicker,而不是jQuery UI Datepicker.jQuery UI不相关. (5认同)

归档时间：	13 年，9 月前
查看次数：	162311 次
最近记录：	9 年，5 月前