Twitter Bootstrap 日期选择器

发布于 2024-12-18 03:49:39 字数 799 浏览 1 评论 0原文

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

原文

How can I use the Twitter Bootstrap date picker? I used the code below but its not working.

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

桜花祭 2024-12-25 03:49:39

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

The most popular bootstrap date picker is currently: https://github.com/eternicode/bootstrap-datepicker
(thanks to @dentarg for digging it up)

A simple instantiation only requires:

HTML

<input class="datepicker">

Javascript

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

See a simple example here https://jsfiddle.net/k6qsm5no/1/ or the full docs here http://bootstrap-datepicker.readthedocs.org/en/latest/

回复收藏 0 原文

两相知 2024-12-25 03:49:39

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

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

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

您可以在演示页面可让您使用日期选择器的配置并观察结果。有关更多详细信息，请参阅简洁但全面的文档，您可以在其不到一个小时就全部完成。

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

快速入门指南

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

Much confusion stems from the existence of at least three major libraries named bootstrap-datepicker:

A popular fork of eyecon's datepicker by Andrew 'eternicode' Rowls (use this one!):
The original version by Stefan 'eyecon' Petre, still available at http://www.eyecon.ro/bootstrap-datepicker/
A totally unrelated datepicker widget that 'storborg' sought to have merged into bootstrap. It wasn't merged and no proper release version of the widget was ever created.

If you're starting a new project - or heck, even if you're taking over an old project using the eyecon version - I recommend that you use eternicode's version, not eyecon's. The original eyecon version is outright inferior in terms of both functionality and documentation, and this is unlikely to change - it has not been updated since March 2013.

You can see most of the capabilities of the eternicode datepicker on the demo page which lets you play with the datepicker's configuration and observe the results. For more detail, see the succinct but comprehensive documentation, which you can probably consume in its entirety in under an hour.

In case you're impatient, though, here's a very short step-by-step guide to the simplest and most common use case for the datepicker.

Quick start guide

Include the following libraries (minimum versions noted here) on your page:
- jQuery
- Bootstrap - both the JS and CSS
- The latest release version of bootstrap-datepicker - both the JS and CSS
Put an input element on your page somewhere, e.g.
```
<input id="my-date-input">
```
With jQuery, select your input and call the .datepicker() method:
```
jQuery('#my-date-input').datepicker();
```
Load your page and click on or tab into your input element. A datepicker will appear:

回复收藏 0 原文

家住魔仙堡 2024-12-25 03:49:39

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 )

回复收藏 0 原文

泛滥成性 2024-12-25 03:49:39

查看 Jquery Bootstrap：

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

回复收藏 0 原文

心舞飞扬 2024-12-25 03:49:39

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

I was having the same problem but when I created a test project, to my surprise, datepicker worked perfectly using Bootstrap v2.0.2 and Jquery UI 1.8.11. Here are the scripts i'm including:

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

回复收藏 0 原文

手心的温暖 2024-12-25 03:49:39

添加

z-index:1151;

到样式表中

.datepicker

add

z-index:1151;

to the style sheet in

.datepicker

回复收藏 0 原文

灼痛 2024-12-25 03:49:39

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

回复收藏 0 原文

鹿童谣 2024-12-25 03:49:39

我在 twitter-bootstrap 上也面临同样的问题。

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

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

回复收藏 0 原文

决绝 2024-12-25 03:49:39

有些人发布了此 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 以满足您的需求。

Some people posted the link to this bootstrap-datepicker.js implementation. I used that one in the following way, it works with Bootstrap 3.

This is the markup I used:

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

This is the javascript:

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

I also included the javascript file downloaded from the link above, along with it's css file, and of course, you should remove any bootstrap grid classes like the col-md-3 to suit your needs.

回复收藏 0 原文

灼疼热情 2024-12-25 03:49:39

您使用了 data-datepicker="datepicker" 它必须是 date-provide="datepicker"

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

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

Full网页：

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

You used data-datepicker="datepicker" It must be date-provide="datepicker"

Also, you included 2 bootstrap stylesheets bootstrap.css and bootstrap.min.css

I also prefer to use bootstrap-datepicker3.min.css than datepicker.less

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

回复收藏 0 原文

~没有更多了~