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不兼容？

回答

相關問題