時刻入力に便利な「Timepicker for Bootstrap」
「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。
Bootstrap2版はこちら
Datepicker for Bootstrap (別記事)
実装方法
スクリプト
<link href="bootstrap.min.css" type="text/css" rel="stylesheet"> <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">
時刻指定時の矢印アイコンのclass名が未対応のため若干修正しました。
<!-- bootstrap-timepicker.js --> <!-- 修正前 --> <i class="icon-chevron-up"> <!-- 修正後 --> <i class="glyphicon glyphicon-chevron-up">
実装
<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>
ClockPicker 時計型
関連記事
-
ナビゲーション内にサムネイルを設置できる画像スライダー・ギャラリー用プラグイン
画像ギャラリーを作成してくれるjQueryプラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)
Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト
-
親要素の大きさに合わせてテキストをリサイズ「FitText」
「FitText」は親要素の大きさに合わせてテキストをリサイズしくれるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 responsive_head
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
Comment
https://t.co/Cnc3j2WbuY
オプションの
$('#tp1').datepicker({
は
$('#tp1').timepicker({
ですね。
jQuery - 時刻入力に便利な「Timepicker for Bootstrap」 https://t.co/Yd9vsV3i2G
これ使ってみようかな 時刻入力に便利な「Timepicker for Bootstrap」 http://t.co/BNfoVxiIj1