jQuery datepicker与Twitter Bootstrap不兼容吗?

the*_*cer 4 jquery twitter-bootstrap

我有这个日期选择器,我想在页面上显示.我尝试过JQ 1.6.4和1.7.2.我在Ubuntu上使用vrom.2和vrom.2中的Chromium.

这是我正在使用的代码.这是我的观点,我试图显示选择器.

#{extends 'main.html' /} #{set title:'Download Team Data' /}

<table align="center">
    <tr>
        <td height="50px">&nbsp;</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>
Run Code Online (Sandbox Code Playgroud)

加载JavaScripts和CSS文件,main.html其中包含在所有视图中扩展的视图.此外,我已尝试在上面的视图中引用这些文件.这些是参考:

<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>
Run Code Online (Sandbox Code Playgroud)

单击输入框不会显示日期选择器.我错过了什么?

Ter*_*rry 7

在Twitter Bootstrap中使用jQuery UI并不是一个好主意.主要是因为CSS类很容易被覆盖并导致显示各种组件的问题.有些东西可能有用,有些可能没有,它不是一个全有或全无的东西.

话虽这么说,你可能想看看这个Bootstrap datepicker插件.

如果它不适合您的需求,您将必须弄清楚jQuery UI和Bootstrap之间的哪些类冲突并修复它们.Chrome的CSS查看器可让您查看哪些类对元素的样式(或缺少样式)有贡献.