Twitter Bootstrap 日期选择器答案

【问题标题】：Twitter Bootstrap date pickerTwitter Bootstrap 日期选择器
【发布时间】：2012-01-06 06:14:44
【问题描述】：

如何使用 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>

【问题讨论】：

您混淆了不同的日期选择器。您在询问 bootstrap-datepicker，这就是您似乎包含在 <script> 标记中的内容，但您的 <input> 包含属性 data-datepicker="datepicker"，这根本不是 bootstrap-datepicker 的东西。我什至不知道哪个 datepicker 库使用该属性——它也不是 jQuery UI Datepicker。无论如何，我已经发布了 a quickstart guide 以使用实际的 bootstrap-datepicker。

标签： twitter-bootstrap datepicker bootstrap-datepicker

【解决方案1】：

目前最流行的引导日期选择器是：https://github.com/eternicode/bootstrap-datepicker （感谢@dentarg 挖掘它）

一个简单的实例化只需要：

HTML

<input class="datepicker">

Javascript

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

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

【讨论】：

在小提琴中，当我点击文本框时没有任何反应，是不是应该弹出选择器？

【解决方案2】：

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

Andrew 'eternicode' Rowls 的 eyecon 日期选择器的一个流行分支（使用这个！）：
Stefan 'eyecon' Petre 的原始版本，仍可通过http://www.eyecon.ro/bootstrap-datepicker/ 获得
'storborg'sought to have merged into bootstrap 的完全不相关的日期选择器小部件。它没有被合并，也没有创建任何适当的小部件发布版本。

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

您可以在the demo page 上看到 eternicode datepicker 的大部分功能，它可以让您使用 datepicker 的配置并观察结果。有关更多详细信息，请参阅 succinct but comprehensive documentation，您可能会在一小时内将其全部吃完。

如果您不耐烦，这里有一个非常简短的分步指南，介绍了日期选择器最简单和最常见的用例。

快速入门指南

在您的页面上包含以下库（最低版本注明here）：
- jQuery
- Bootstrap - JS 和 CSS
- The latest release version of bootstrap-datepicker - JS 和 CSS
在页面的某处放置input 元素，例如
```
<input id="my-date-input">
```
使用 jQuery，选择您的输入并调用 .datepicker() 方法：
```
jQuery('#my-date-input').datepicker();
```
加载您的页面并单击或使用标签进入您的input 元素。将出现一个日期选择器：

【讨论】：

【解决方案3】：

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 不相关。

【解决方案4】：

查看 Jquery Bootstrap：

http://jslegers.github.com/jquery-bootstrap/

【讨论】：

【解决方案5】：

我遇到了同样的问题，但是当我创建一个测试项目时，令我惊讶的是，datepicker 使用 Bootstrap v2.0.2 和 Jquery UI 1.8.11 可以完美运行。以下是我包含的脚本：

        <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>

【讨论】：

【解决方案6】：

添加

z-index:1151;

到样式表中

.datepicker

【讨论】：

【解决方案7】：

使用 themeroller 创建自定义主题，然后在下载页面上选择“高级主题设置”。 将 CSS 范围设置为“body”。由于您下载的 CSS 规则将以 body 标记选择器为前缀，因此它们将具有更高的特异性，并将覆盖引导规则。

【讨论】：

【解决方案8】：

对于 twitter-bootstrap，我也面临同样的问题。

由于eternicode/bootstrap-datepicker 与 jQuery UI 不兼容。

但即使使用 jQuery UI，twitter-bootstrap 也适用于 vitalets/bootstrap-datepicker。

【讨论】：

【解决方案9】：

有些人将link 发布到这个 bootstrap-datepicker.js 实现中。我按以下方式使用了它，它适用于 Bootstrap 3。

这是我使用的标记：

<div class="input-group date col-md-3" data-date-format="dd-mm-yyyy" data-date="01-01-2014">                        
    <input id="txtHomeLoanStartDate" class="form-control" type="text" readonly="" value="01-01-2014" size="14" />
    <span class="input-group-addon add-on">
        <span class="glyphicon glyphicon-calendar"</span>
    </span>
</div>

这是javascript：

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

我还包含了从上面的链接下载的 javascript 文件以及它的 css 文件，当然，您应该删除任何引导网格类，如 col-md-3 以满足您的需要。

【讨论】：

请注意，eyecon 日期选择器不再维护，而是由 eternicode 分叉。您应该改用 eternicode 的（当前维护的、功能更齐全且文档正确的）版本：github.com/eternicode/bootstrap-datepicker

【解决方案10】：

你用的data-datepicker="datepicker"一定是date-provide="datepicker"

此外，您还包含了 2 个引导样式表 bootstrap.css 和 bootstrap.min.css

我也更喜欢使用bootstrap-datepicker3.min.css 而不是datepicker.less

完整的 HTML：

<html>
    <head>
    <title>DatePicker Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap-datepicker3.min.css">
    <script src="js/jquery-1.7.1.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    </head>
    <body>
        <form>
            <div class="input">
                <input data-provide="datepicker" class="small" type="text" value="01/05/2011">
            </div>
        </form>
    </body>
</html>

【讨论】：