Question

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

Answer 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/

Answer 2

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

Andrew'eternicode'Rowls 的一个流行的eyecon's datepicker前叉（使用这个！）：
Stefan'eyecon'Petre的原始版本，仍可在http://www.eyecon.ro/bootstrap-datepicker/
一个完全不相关的'storborg'sought to have merged into bootstrap的datepicker小部件。它没有合并，也没有创建适当的小部件发布版本。

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

您可以在the demo page上看到eternicode datepicker的大多数功能，它们可以让您使用日期选择器的配置并观察结果。有关更多详细信息，请参阅succinct but comprehensive documentation，您可以在一小时内完整地使用它。

如果你不耐烦，这里是一个非常简短的分步指南，指出了datepicker最简单和最常见的用例。

快速入门指南

在您的网页上添加以下图书馆（最低版本为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元素。将出现一个日期选择器：

Answer 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）

有所帮助

Answer 4

我遇到了同样的问题但是当我创建一个测试项目时，令我惊讶的是，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>

Answer 5

查看Jquery Bootstrap：

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

Answer 6

添加

z-index:1151;

到

中的样式表

.datepicker

Answer 7

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

Answer 8

我也面临着与twitter-bootstrap相同的问题。

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

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

Answer 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以满足您的需求。

Answer 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>

Twitter Bootstrap日期选择器

10 个答案:

快速入门指南