時刻入力に便利な「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>
関連記事
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
入力されたメールアドレスのドメインをサジェストしてくれる「mailcheck.js」
「mailcheck.js」は、入力されたメールアドレスのドメインをサジェストしてくれるjQueryプラグインです。 ダウンロード スクリプト 実装 v
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
Lightboxなどが実装できるプラグイン「Magnific Popup」
「Magnific Popup」はlightboxを実装できるjQueryプラグインです。 この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい
-
-
「jqPlot」 カスタマイズ
以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし
-
-
クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」
「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を
-
-
リストをインクリメント検索・ソートできる「List.js」
List.jsは、リストをインクリメント検索やソートができるjQueryプラグインです。 ダウンロードはこちら リストだけでなくテーブルにも実装可能のようです。 スクリプト
-
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768



