Twitter引导dateselect器
我如何使用Twitter Bootstrapdateselect器？ 我使用下面的代码，但它不工作。
<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> 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 ）
当前最stream行的引导dateselect器是： 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/
很多困惑源于至less三个名为bootstrap-datepicker的主要库的存在：
- 安德鲁'eternicode'罗尔斯（使用这个！） eyecon的dateselect器的stream行叉：
- 在线演示，以及最新版本的下载链接
- 全面的文件
- GitHub回购
- Stefan“eyecon”Petre的原始版本，可在http://www.eyecon.ro/bootstrap-datepicker/上find
- 一个完全不相关的dateselect器小部件，“storborg” 试图合并成bootstrap 。 它没有被合并，也没有创build正确的发行版本的小部件。
如果你正在开始一个新的项目 – 或者说，即使你正在使用eyecon版本来接pipe一个旧的项目 – 我build议你使用eternicode的版本，而不是眼睛的 。 原来的eyecon版本在function和文档方面都差强人意，而且这种情况也不太可能发生变化 – 从2013年3月起，这个版本一直没有更新。
您可以在演示页面上看到eternicode datepicker的大部分function，让您可以使用dateselect器的configuration进行游戏并观察结果。 有关更多详细信息，请参阅简洁但全面的文档 ，您可能在一小时内完全使用这些文档 。
如果你不耐烦的话，这里有一个很简单的dateselect器最简单和最常见的用例分步指南。
快速入门指南
- 在您的页面上包含以下库（ 在此指出的最低版本）：
- jQuery的
- Bootstrap – JS和CSS
- bootstrap-datepicker的最新版本 – JS和CSS
-
在你的页面上放置一个
input元素，例如<input id="my-date-input"> -
使用jQuery，select你的input并调用
.datepicker()方法：jQuery('#my-date-input').datepicker(); -
加载你的页面，并点击或
input你的input元素。 dateselect器将出现：
看看Jquery Bootstrap：
我有同样的问题，但是当我创build一个testing项目，令我惊讶的是，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>
加
z-index:1151;
到样式表中
.datepicker
使用美乐软件创build自定义主题，然后在下载页面上select“高级主题设置”。 将CSS范围设置为“正文” 。 由于您下载的CSS规则将以body标签select符作为前缀，因此它们将具有更高的特异性并将覆盖引导规则 。
我也面临着twitter-bootstrap的同样的问题。
由于eternicode / bootstrap-datepicker与jQuery UI不兼容。
但是twitter-bootstrap对于使用jQuery UI的vitalets / bootstrap-datepicker工作正常。
有些人发布了这个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任何引导网格类，以满足您的需求。
你使用的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>
