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 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 )
最も人気のある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/
多くの混乱は、bootstrap-datepickerという名前の少なくとも3つの主要なライブラリの存在に起因しています。
新しいプロジェクトを開始している場合-または、eyeconバージョンを使用して古いプロジェクトを引き継いでいる場合でも-eternicodeのバージョンを使用することをお勧めします、eyecon'sではありません。オリジナルのeyeconバージョンは、機能とドキュメントの両方の点で完全に劣っています。これは変更されることはほとんどありません。2013年3月以降は更新されていません。
デモページ でeternicodeのdatepickerのほとんどの機能を確認できます。これにより、datepickerの構成を操作して結果を確認できます。詳細については、 簡潔だが包括的なドキュメント を参照してください。おそらく1時間以内に完全に消費できます。
ただし、イライラする場合に備えて、日付ピッカーの最も単純で最も一般的な使用例について、非常に短いステップバイステップガイドを紹介します。
input
要素をページのどこかに置きます。
<input id="my-date-input">
JQueryを使用して、入力を選択し、.datepicker()
メソッドを呼び出します。
jQuery('#my-date-input').datepicker();
ページをロードし、input
要素をクリックするか、タブで移動します。日付ピッカーが表示されます:
Jquery Bootstrapを確認してください。
追加
z-index:1151;
スタイルシートに
.datepicker
私は同じ問題を抱えていましたが、驚いたことに、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>
Themerollerでカスタムテーマを作成し、ダウンロードページで[テーマの詳細設定]を選択します。 CSSスコープを「body」に設定。ダウンロードしたCSSルールにはbodyタグセレクターが接頭辞として付加されるため、より詳細になり、override bootstrap rulesになります。
この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グリッドクラスを削除する必要があります。
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>
Twitter-bootstrapでも同じ問題に直面していました。
eternicode/bootstrap-datepicker はjQuery UIと互換性がありません。
ただし、jQuery UIを使用していても、Twitter-bootstrapは vitalets/bootstrap-datepicker で正常に機能しています。