4

ページに表示したいこの日付ピッカーがあります。JQ 1.6.4 と 1.7.2 で試しました。Ubuntu の Chromium で playframework の v1.2.4 を使用しています。

これは私が取り組んでいるコードです。これは、ピッカーを表示しようとしている私のビューです。

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

main.htmlすべてのビューで拡張されたビューであるJavaScript ファイルと CSS ファイルが読み込まれます。また、上記のビューでこれらのファイルを参照してみました。これらは参照です：

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

入力ボックスをクリックしても、日付ピッカーは表示されません。私は何が欠けていますか？

4

2 に答える 2

7

Twitter Bootstrap で jQuery UI を使用するのは良い考えではありません。主な理由は、CSS クラスが簡単にオーバーライドされ、さまざまなコンポーネントの表示で問題が発生する可能性があるためです。うまくいくものもあれば、うまくいかないものもあり、すべてかゼロかということではありません。

そうは言っても、この Bootstrap datepickerプラグインを見たいと思うかもしれません。

ニーズに合わない場合は、jQuery UI と Bootstrap の間で競合しているクラスを特定し、修正する必要があります。Chrome の CSS ビューアを使用すると、要素のスタイルに貢献している (または欠如している) クラスを表示できます。

于 2012-06-14T14:22:31.300 に答える
0

あなたはtest_inputIDとして持っていますが、日付ピッカーをにバインドしていますinput_test

于 2012-06-14T09:32:37.850 に答える