jQuery datepicker是否与Twitter Bootstrap不兼容? [英] Is jQuery datepicker incompatible with Twitter Bootstrap?
问题描述
我有此日期选择器，要在页面上显示.我已经尝试过使用JQ 1.6.4和1.7.2.我在Ubuntu上使用带有Chromium的playframework v1.2.4.
I have this datepicker that I want to display on a page. I have tried with JQ 1.6.4 and 1.7.2. I am using v1.2.4 of the playframework with Chromium on Ubuntu.
这是我正在使用的代码.这是我试图显示选择器的视图.
This is the code I am working with. This is my view where I am trying to show the picker.
#{extends 'main.html' /} #{set title:'Download Team Data' /}
<table align="center">
<tr>
<td height="50px"> </td>
</tr>
</table>
<div class="page-header">
<a href="@{Application.downloadAttendanceData()}">Download
your team's data for this cycle.</a>
</div>
<div class="demo">
<p>
Date: <input type="text" id="datepicker">
</p>
</div>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
JavaScript和CSS文件加载在main.html中，该视图在所有视图中都得到了扩展.此外，我尝试在上面的视图中引用这些文件.这些是参考:
The JavaScripts and CSS files are loaded in main.html which is a view that's extended in all views. Besides, I have tried referencing these files in the above view. These are the references:
<head>
<title>#{get 'title' /}</title>
<meta http-equiv="Content-Type" content="text/html"
charset="${_response_encoding}">
<link rel="stylesheet" media="screen"
href="@{'/public/stylesheets/main.css'}">
<link rel="stylesheet" media="screen"
href="@{'/public/stylesheets/demo.css'}">
<link rel="stylesheet" href="@{'public/bootstrap/css/bootstrap.css'}">
<link rel="stylesheet"
href="@{'public/bootstrap/css/bootstrap.min.css'}">
<link rel="stylesheet"
href="@{'public/bootstrap/css/bootstrap-responsive.css'}">
<link rel="stylesheet" href="@{'public/bootstrap/less/bootstrap.less'}">
#{get 'moreStyles' /}
<link rel="shortcut icon" type="image/png"
href="@{'/public/images/favicon.png'}">
<script src="@{'/public/javascripts/jquery-1.7.2.min.js'}"
type="text/javascript"></script>
<script src="@{'/public/javascripts/jquery-ui-1.8.21.custom.min.js'}"
type="text/javascript"></script>
<script src="@{'/public/javascripts/jquery.ticker.js'}"
type="text/javascript"></script>
#{get 'moreScripts' /}
<script src="@{'/public/javascripts/testapp.js'}" type="text/javascript"></script>
<script src="@{'/public/bootstrap/js/bootstrap-alert.js'}"
type="text/javascript"></script>
<script src="@{'/public/bootstrap/js/bootstrap-collapse.js'}"
type="text/javascript">
</script>
<script>
function loaded(){
}
</script>
</head>
单击输入框不会显示日期选择器.我想念什么?
Clicking on the input box doesnt show the datepicker. What am I missing?
推荐答案
在Twitter Bootstrap中使用jQuery UI并不是一个好主意.主要是因为CSS类很容易被覆盖，并在显示各种组件时引起问题.有些事情可能会起作用，有些事情可能不会起作用，这不是一无所有的事情.
Using jQuery UI with Twitter Bootstrap is not a great idea. Mostly because CSS classes can easily be overridden and cause issues with displaying various components. Some things may work, some may not, it's not an all-or-none thing.
话虽这么说，您可能想看看此Bootstrap datepicker 插件.
That being said, you may want to look at this Bootstrap datepicker plugin.
如果它不符合您的需求，则必须找出jQuery UI和Bootstrap之间有哪些类冲突并进行修复. Chrome的CSS查看器可让您查看哪些类对元素的样式(或缺乏元素的样式)有贡献.
If it doesn't suit your needs you'll have to figure out what classes are conflicting between jQuery UI and Bootstrap and fix them. Chrome's CSS viewer lets you view which classes are contributing to an element's style (or lack thereof).
这篇关于jQuery datepicker是否与Twitter Bootstrap不兼容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
