54

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

10 回答 10

68

目前最流行的引导日期选择器是：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/

于 2012-04-02T05:53:18.383 回答
30

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

  1. Andrew 'eternicode' Rowls 的 eyecon 日期选择器的一个流行分支（使用这个！）：
  2. Stefan 'eyecon' Petre 的原始版本，仍可在http://www.eyecon.ro/bootstrap-datepicker/获得
  3. 一个完全不相关的 datepicker 小部件，“storborg”试图合并到 bootstrap中。它没有被合并，也没有创建过适当的小部件发布版本。

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

您可以在演示页面上看到 eternicode datepicker 的大部分功能，让您可以使用 datepicker 的配置并观察结果。有关更多详细信息，请参阅简洁但全面的文档，您可能会在不到一个小时的时间内将其全部看完。

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

快速入门指南

  1. 在您的页面上包含以下库（此处注明的最低版本）：

  2. 将input元素放在页面上的某个地方，例如

    <input id="my-date-input">

  3. 使用 jQuery，选择您的输入并调用该.datepicker()方法：

    jQuery('#my-date-input').datepicker();

  4. 加载您的页面并单击或选项卡进入您的input元素。将出现一个日期选择器：

    日期选择器的图片

于 2014-01-07T23:54:12.723 回答
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 )

于 2011-11-26T17:18:56.827 回答
1

添加

z-index:1151;

到样式表中

.datepicker
于 2013-03-03T08:11:07.227 回答
1

查看 Jquery Bootstrap：

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

于 2012-06-14T21:46:50.707 回答
1

我遇到了同样的问题，但是当我创建一个测试项目时，令我惊讶的是，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>
于 2012-06-14T21:42:59.520 回答
0

有些人发布了这个 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满足您的需要。

于 2013-12-06T09:45:22.860 回答
0

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

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

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

于 2013-09-13T09:20:31.033 回答
0

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

于 2012-03-11T19:57:41.993 回答
0

你用过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>
于 2016-04-04T12:45:47.637 回答