時刻入力に便利な「Timepicker for Bootstrap」(Bootstrap 2)
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。
目次
- 実装方法
- モダール形式
- Datepicker for Bootstrap (別記事)
実装方法
スクリプト
<link href="css/timepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-timepicker.js" type="text/javascript">
実装
<input id="tp1" maxlength="8" type="text"> <script type="text/javascript"> $(function() { $('#tp1').timepicker({}); }); </script>
オプション
<script type="text/javascript"> $(function() { $('#tp1').datepicker({ // template 表示形式 // -------------------------------------------- // (デフォルト) // ドロップダウン // template: 'modal' // モーダル形式 // template: false // 表示しない // minuteStep minute(分)フィールドの刻み間隔 // -------------------------------------------- // (デフォルト) // 15 // showSeconds seconds(秒)フィールドの表示有無 // -------------------------------------------- // (デフォルト) // 表示しない showSeconds: true // 表示する // secondStep seconds(秒)フィールドの刻み間隔 // -------------------------------------------- // (デフォルト) // 15 // defaultTime 選択モード // -------------------------------------------- // (デフォルト) // 現在時刻を設定 // defaultTime: 'value' // 設定値 // defaultTime: false // 空(白) // showMeridian 時刻表記 // -------------------------------------------- // (デフォルト) // 12時間表記 // showMeridian: false // 24時間表記 // showInputs ウィジェット内のテキスト編集を可能 // -------------------------------------------- // (デフォルト) // できる // showInputs: false // できない // disableFocus クリック時フォーカス有無 // -------------------------------------------- // (デフォルト) // disableFocus: true // クリック時にフォーカスさせない。 // *これは、タッチスクリーン(スマートフォンなど)の場合は、 // キーボードを表示させないようにするため便利 // modalBackdrop モーダル背景表示有無 // -------------------------------------------- // (デフォルト) // 表示しない modalBackdrop: true, // 表示 }); }); </script>
モダール形式
選択箇所をモーダルウィンドウで表示するサンプルをつくってみました。bootstrapのmodalを使用するようで、bootstrap.jsの読み込みが必要です。bootstrap-modal.jsだけでもOK サンプル
スクリプト
<link href="css/timepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap.min.js" type="text/javascript"> <script src="js/bootstrap-timepicker.js" type="text/javascript">
実装
<input id="tp2" maxlength="8" type="text"> <script type="text/javascript"> $(function() { $('#tp2').datepicker({ template: 'modal', }); }); </script>
関連記事
-
シンプルな画像スライダー/ギャラリー用プラグイン
スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
カルーセル プラグイン
「カルーセル(Carousel)」とは"回転木馬"という意味らしいのですが、jQuery(Javascript)では画像やコンテンツをスライド表示させるもののようです。が、スライダーとの違いはよく分り
-
ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」
「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ
-
selectボックスを華麗にしてくれる「Chosen」「Select2」
selectボックスに当てるjQueryプラグインを色々探してみましたがこれに決めました。シングルやマルチ、またグループにも対応しています。インスタンス検索してくれるのが決め手 Chosen CDN
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
「jqPlot」を使って棒グラフを作成
jqPlotを使って棒グラフを作成してみました。ベースはこの記事を参照ください。 スクリプト jqPlotのベースとなるjsファイルと以下の棒グラフの作成に必要なスクリプトを読み込んで下さい。
-
Bootstrap Modal + 拡張機能が実装できるプラグイン
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト