web-dev-qa-db-ja.com

Twitter Bootstrap日付ピッカー

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>
twitter-bootstrapdatepickerbootstrap-datepicker
54
Sangram Anand

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

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

これはあなたを助けるかもしれません https://github.com/sferik/Rails_admin （ http://Rails-admin-tb.herokuapp.com/admin/drafts/new ）

16
Michael

最も人気のあるbootstrap日付ピッカーは現在： 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/

68
Josh Stuart

多くの混乱は、bootstrap-datepickerという名前の少なくとも3つの主要なライブラリの存在に起因しています。

  1. Andrew 'eternicode' Rowlsによるeyeconの日付ピッカーの人気フォーク（これを使用してください！）：
  2. http://www.eyecon.ro/bootstrap-datepicker/ でまだ利用可能なStefan 'eyecon' Petreによるオリジナルバージョン
  3. 'storborg' bootstrapにマージされることを求めていた である、まったく無関係なdatepickerウィジェット。それはマージされず、ウィジェットの適切なリリースバージョンは作成されませんでした。

新しいプロジェクトを開始している場合-または、eyeconバージョンを使用して古いプロジェクトを引き継いでいる場合でも-eternicodeのバージョンを使用することをお勧めします、eyecon'sではありません。オリジナルのeyeconバージョンは、機能とドキュメントの両方の点で完全に劣っています。これは変更されることはほとんどありません。2013年3月以降は更新されていません。

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

ただし、イライラする場合に備えて、日付ピッカーの最も単純で最も一般的な使用例について、非常に短いステップバイステップガイドを紹介します。

クイックスタートガイド

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

  2. input要素をページのどこかに置きます。

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

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

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

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

    Picture of a datepicker

30
Mark Amery

Jquery Bootstrapを確認してください。

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

1
Andrew

追加

z-index:1151;

スタイルシートに

.datepicker
1
Sujay sreedhar

私は同じ問題を抱えていましたが、驚いたことに、Bootstrap v2.0.2とJquery UI 1.8.11を使用してdatepickerが完全に機能しました。私が含むスクリプトは次のとおりです。

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

Themerollerでカスタムテーマを作成し、ダウンロードページで[テーマの詳細設定]を選択します。 CSSスコープを「body」に設定。ダウンロードしたCSSルールにはbodyタグセレクターが接頭辞として付加されるため、より詳細になり、override bootstrap rulesになります。

0
Shehab Fawzy

このbootstrap-datepicker.js実装に link を投稿した人もいます。これを次のように使用しました。Bootstrap 3で動作します。

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

<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などのbootstrapグリッドクラスを削除する必要があります。

0
Cloud9999Strife

data-datepicker="datepicker"を使用しましたdate-provide="datepicker"でなければなりません

また、2つのbootstrapスタイルシート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>
0
Quan Do

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

eternicode/bootstrap-datepicker はjQuery UIと互換性がありません。

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

0
Tanmay