web-dev-qa-db-ja.com

Bootstrap datetimepickerにカレンダーが表示されない

私は以下のコードでbootstrap datetimepickerを実装しています：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker1">
                    <input type="text" class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

以下のスクリプトとスタイルを含めました： Files included

そして私の出力は以下のようになります： Output on page

ファイルを含める順序は次のとおりです。

@Styles.Render("~/Content/css")
@Styles.Render("~/Content/Styles/PreLayout.css")

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
@Scripts.Render("~/bundles/moment")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/Scripts/JavaScripts/PreLayout.js")

カレンダーアイコンをクリックしても何も起こりません。実装でどんな間違いをしていますか？

編集：

追加されたフィドラー： http://jsfiddle.net/1c1nr9sp/4/

javascriptjquerycsstwitter-bootstrapdatetimepicker
7
ATP

問題の原因は、参照スクリプトを正しい順序で配置していないことです。

ドキュメントを参照してください： http://eonasdan.github.io/bootstrap-datetimepicker/Installing/

$('#datetimepicker1').datetimepicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        
    </div>
</div>
11
Vimalan Jaya Ganesh

テキストボックスとカレンダーのアイコンの間のめちゃくちゃな間隔については、次の行をコメントアウトすることで修正できました。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

私のプロジェクトは代わりにこれを処理します。 ASP.net/MVCまた、col-sm-6をcol-sm-12に変更しました。

1
JaymesG

jQuery 3.xの使用に問題がありました。 （Bootstrap 3の最新バージョンはjQuery 3をサポートします。）ドロップダウンは部分的にレンダリングされますが、カレンダーはありません。タイムピッカー部分は問題なく動作しました。

jQuery 2.xにダウングレードして問題を修正しました。

0
mrrrk

また、使用しているアイコンセットを確認することもできます。 Font Awesome、Material Design、Bootstrap glyphiconsなどの複数のフォントアイコンセットがあります。

デフォルトではDateTimePickerはBootstrap glyphiconsを使用しますが、他のすべてのものにカスタムアイコンを指定できます。

icons:{
            time: 'glyphicon glyphicon-time',
            date: 'glyphicon glyphicon-calendar',
            up: 'glyphicon glyphicon-chevron-up',
            down: 'glyphicon glyphicon-chevron-down',
            previous: 'glyphicon glyphicon-chevron-left',
            next: 'glyphicon glyphicon-chevron-right',
            today: 'glyphicon glyphicon-screenshot',
            clear: 'glyphicon glyphicon-trash',
            close: 'glyphicon glyphicon-remove'
        }

Ref- http://eonasdan.github.io/bootstrap-datetimepicker/Options/#icons

0
Swaps

同様の問題だが異なる解決策

これはASP.NET Coreプロジェクトに固有です。デフォルトのVisual Studioテンプレートでは、すべての入力タグは次のように最大幅280pxに設定されています。

ファイル：site.css

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

それを削除するだけで、カレンダーアイコンが適切な場所に収まります。

0
Fab