jQuery datepicker与Twitter Bootstrap不兼容？

我有这个日期选择器，我想要在页面上显示。我已经尝试过使用JQ 1.6.4和1.7.2。我在Ubuntu上使用Chromium的playframework的v1.2.4。jQuery datepicker与Twitter Bootstrap不兼容？

这是我正在使用的代码。这是我的观点，我试图展示选择器。

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

的JavaScript和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>

点击输入框不显示日期选择器。我错过了什么？

来源

2012-06-14 theTuxRacer

你是否收到任何javascript错误？另外，改变你的所有脚本包括，所以他们使用播放路由，这种方式播放会抛出一个异常，如果拼写错误的路径到JavaScript文件。例如： – aaberg

我收到JS错误，但它们不会影响应用程序，在我开始制作这款日期选择器之前得到它们。在此期间，我将改变包含。尽管目前的方式我确实收到了错误页面。 – theTuxRacer

使用jQuery UI与Twitter的引导是不是一个好主意。主要是因为CSS类很容易被覆盖，并导致显示各种组件的问题。有些事情可能有效，有些可能不行，但这不是一个全或无的事情。

这就是说，你可能想看看this Bootstrap datepicker插件。

如果它不适合您的需求，您将不得不弄清楚jQuery UI和Bootstrap之间的哪些类发生冲突并解决它们。 Chrome浏览器的CSS浏览器可以让你查看哪些类对元素的样式有贡献（或缺少）。

来源

2012-06-14 14:22:31 Terry

谢谢，你刚刚证实我的怀疑。当我在等待答案时，我偶然开始使用相同的插件，所以这很好。这个对我有用。唯一的问题是，我从date.valueOf（）获取日期值为'1281335810600000'。如何将其转换为人类可读值？转换时的数字如果被认为是一个时代给出了6030年5月23日的日期。 – theTuxRacer

没关系，我错误地复制了控制台日志。谢谢！ – theTuxRacer

感谢您的信息。我以前从不知道引导日期选择器。我有一个相同的问题:) – Shinichi

你有test_input为ID，但日期选择器绑定到input_test

来源

2012-06-14 09:32:37 Kennyan

对不起，我在发布之前验证了我的代码，并在代码中进行了更改，但在此处没有更改。这是说，它仍然无法正常工作。 – theTuxRacer

你似乎没有jquery.ui.js包括 – Kennyan

我得到了jquery.ui，仍然没有工作。我更新了代码以反映这一点。 – theTuxRacer

jQuery datepicker与Twitter Bootstrap不兼容？

回答

相关问题