時刻入力に便利な「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 時計型
関連記事
-
-
select(list)ボックスを左右に並べて視覚的に使いやすくしてくれる「Multiselect」
「Multiselect」は、selectボックスを左右に配置して、選択したもの・していないものを左右に分けてくれるjQueryプラグインです。視覚的に使いやすくしてくれます。ダウンロードはこちら
-
-
バリデーション プラグイン
Nod Nod サイト | デモ [browser-shot url="http://rickharrison.github.io/validate.js/" width="2
-
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
-
テキストボックスの入力値を数値限定にしてくれる「jQuery - numeric」
「jQuery - numeric」は、テキストボックスへの入力を数字のみに制限してくれるjQueryプラグインです。正/負、整数/小数点 チェックまで限定してくれます。ダウンロード スクリプト
-
-
シンプルにポップアップを実装できる「PopBox」
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト HTML Click Here!
-
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb
-
-
シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlider」
「bxSlider」はシンプルに設置でき、かついろいろとオプションが設定可能なスライダー用プラグインです。サイト CDN 標準でもしくはオプションで実現できそうなこと スワイプ キャプション
-
-
日付入力に便利な「Datepicker for Bootstrap」
「Datepicker for Bootstrap」はテキストボックスにカレンダーを表示して日付入力を便利にしてくれるjQueryプラグインです。 目次 Datepicker for Boot
-
-
ローソク足チャート「jqPlot」
「ローソク足チャート」は株価の4本値を表示するグラフでよく使われるグラフです。 一つのプロットでOHLC(Open, High, Low, Close) それぞれ、Openは始値、Highは高値、
-
-
ポップアップ・モーダル ウィンドウ プラグイン
ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers
Comment
https://t.co/Cnc3j2WbuY
オプションの
$('#tp1').datepicker({
は
$('#tp1').timepicker({
ですね。
jQuery - 時刻入力に便利な「Timepicker for Bootstrap」 https://t.co/Yd9vsV3i2G
これ使ってみようかな 時刻入力に便利な「Timepicker for Bootstrap」 http://t.co/BNfoVxiIj1