54

Twitter Bootstrap日付ピッカーを使用するにはどうすればよいですか？以下のコードを使用しましたが、機能しません。

<html>
    <head>
    <title>DatePicker Demo</title>
    <script src="js/jquery-1.7.1.js"></script>
    <link href="css/datepicker.less" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="js/bootstrap-datepicker.js"></script>

    </script>
    </head>
    <body>
    <form >
        <div class="input">
            <input class="small" type="text" value="01/05/2011" data-datepicker="datepicker">
        </div>
    </form>

    </body>
</html>
4

10 に答える 10

68

現在最も人気のあるブートストラップ日付ピッカーは次のとおりです：https ：//github.com/eternicode/bootstrap-datepicker（掘り下げてくれた@dentargに 感謝します）

単純なインスタンス化に必要なのは次のとおりです。

HTML

<input class="datepicker">

Javascript

$('.datepicker').datepicker();

https://jsfiddle.net/k6qsm5no/1/の簡単な例、またはhttp://bootstrap-datepicker.readthedocs.org/en/latest/の完全なドキュメントを参照してください。

于 2012-04-02T05:53:18.383 に答える
30

多くの混乱は、bootstrap-datepickerという名前の少なくとも3つの主要なライブラリの存在から生じます。

  1. Andrew'eternicode' Rowlsによるeyeconのdatepickerの人気のあるフォーク（これを使用してください！）：
  2. Stefan'eyecon' Petreによる元のバージョンは、引き続きhttp://www.eyecon.ro/bootstrap-datepicker/で入手できます。
  3. 'storborg'がブートストラップにマージしようとしたまったく関係のないdatepickerウィジェット。マージされておらず、ウィジェットの適切なリリースバージョンは作成されていません。

新しいプロジェクトを開始する場合、または、eyeconバージョンを使用して古いプロジェクトを引き継ぐ場合でも、eyeconのバージョンではなく、eternicodeのバージョンを使用することをお勧めします。元のeyeconバージョンは、機能とドキュメントの両方の点で完全に劣っています。これが変更される可能性は低く、2013年3月以降更新されていません。

デモページでeternicodedatepickerのほとんどの機能を確認できます。このデモページでは、datepickerの構成を試して、結果を確認できます。詳細については、簡潔で包括的なドキュメントを参照してください。このドキュメントは、おそらく1時間以内に完全に消費できます。

ただし、焦りがちな方のために、日付ピッカーの最も単純で最も一般的な使用例についての非常に短いステップバイステップガイドを示します。

クイックスタートガイド

  1. 次のライブラリ（ここに記載されている最小バージョン）をページに 含めます。

  2. ページinputのどこかに要素を配置します。例：

    <input id="my-date-input">

  3. jQueryを使用して、入力を選択し、.datepicker()メソッドを呼び出します。

    jQuery('#my-date-input').datepicker();

  4. ページをロードし、クリックするか、input要素にタブで移動します。日付ピッカーが表示されます：

    デートピッカーの写真

于 2014-01-07T23:54:12.723 に答える
16

Twitter Bootstrapは、現時点ではjQueryUIスタイルと互換性がありません。

https://github.com/twitter/bootstrap/issues/156

これはhttps://github.com/sferik/rails_admin（http://rails-admin-tb.herokuapp.com/admin/drafts/new）に役立つ可能性があります

于 2011-11-26T17:18:56.827 に答える
1

同じ問題が発生していましたが、テストプロジェクトを作成したとき、驚いたことに、datepickerはBootstrapv2.0.2とJqueryUI1.8.11を使用して完全に機能しました。これが私が含めているスクリプトです：

        <link href="@Url.Content("~/Content/bootstrap.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/bootstrap-responsive.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
于 2012-06-14T21:42:59.520 に答える
1

JqueryBootstrapをチェックしてください：

http://jslegers.github.com/jquery-bootstrap/

于 2012-06-14T21:46:50.707 に答える
1

追加

z-index:1151;

のスタイルシートに

.datepicker
于 2013-03-03T08:11:07.227 に答える
0

テーマローラーを使用してカスタムテーマを作成し、ダウンロードページで[テーマの詳細設定]を選択します。CSSスコープを「body」に設定します。ダウンロードしたCSSルールには、bodyタグセレクターのプレフィックスが付いているため、特異性が高くなり、ブートストラップルールが上書きされます。

于 2012-03-11T19:57:41.993 に答える
0

twitter-bootstrapでも同じ問題に直面していました。

eternicode /bootstrap-datepickerはjQueryUIと互換性がないため。

ただし、twitter-bootstrapは、jQuery UIを使用している場合でも、vitalets/bootstrap-datepickerに対して正常に機能しています。

于 2013-09-13T09:20:31.033 に答える
0

このbootstrap-datepicker.js実装へのリンクを投稿した人もいます。私はそれを次のように使用しました。Bootstrap3で動作します。

これは私が使用したマークアップです：

<div class="input-group date col-md-3" data-date-format="dd-mm-yyyy" data-date="01-01-2014">                        
    <input id="txtHomeLoanStartDate" class="form-control" type="text" readonly="" value="01-01-2014" size="14" />
    <span class="input-group-addon add-on">
        <span class="glyphicon glyphicon-calendar"</span>
    </span>
</div>

これはjavascriptです：

$('.date').datepicker();

上記のリンクからダウンロードしたjavascriptファイルとそのcssファイルも含めました。もちろん、col-md-3ニーズに合わせて、のようなブートストラップグリッドクラスを削除する必要があります。

于 2013-12-06T09:45:22.860 に答える
0

あなたが使用data-datepicker="datepicker"したdate-provide="datepicker"

また、2つのブートストラップスタイルシートbootstrap.cssとbootstrap.min.css

私も使うのが好きbootstrap-datepicker3.min.cssですdatepicker.less

フルHTML：

<html>
    <head>
    <title>DatePicker Demo</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/bootstrap-datepicker3.min.css">
    <script src="js/jquery-1.7.1.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    </head>
    <body>
        <form>
            <div class="input">
                <input data-provide="datepicker" class="small" type="text" value="01/05/2011">
            </div>
        </form>
    </body>
</html>
于 2016-04-04T12:45:47.637 に答える