時刻入力に便利な「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プラグインはたくさん制作されています。その中でもサムネイルを使用してギャラリーのナビゲーションを行ってくれるプラグインをいくつか集めてみました。 サムネ
-
-
ページ内のフォントサイズを変更してくれる「Text Resizer」
「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.j
-
-
入力テキストの文字数をカウントしてくれる「Textchange」
Twitterのようにinputやtextareaに入力した際に、文字数をカウント(ダウン)してくれるとユーザの利便性が上がります。今回使用したTextChangeは、それ以外にも入力のイベントに対し
-
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
-
-
jqPlot - Legend(凡例) オプション
jqPlotの凡例(Legend)の設定オプションのまとめです。前提は、こちらを参照して下さい。 目次 凡例を表示 凡例の位置 [location, placement] 凡例のフォ
-
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
-
画像ギャラリーを実装できる「Galleria」
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
Comment
https://t.co/Cnc3j2WbuY
オプションの
$('#tp1').datepicker({
は
$('#tp1').timepicker({
ですね。
jQuery - 時刻入力に便利な「Timepicker for Bootstrap」 https://t.co/Yd9vsV3i2G
これ使ってみようかな 時刻入力に便利な「Timepicker for Bootstrap」 http://t.co/BNfoVxiIj1