時刻入力に便利な「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 時計型
関連記事
-
-
数値入力に便利なステッパーを実装「Numeric Stepper」
「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas
-
-
グラフ作成 プラグイン
C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali
-
-
グリッドレイアウト プラグイン
Waterfall サイト pinbox [browser-shot url="http://kayschneider.github.io/pinbox/example/pinb
-
-
Wysiwygエディタ用プラグイン「CKEditor」
「CKEditor」は、Wysiwygエディタを実装できるプラグインです。 ダウンロード | デモ スクリプト 実装 文字数・単語数のカウント表
-
-
「jqPlot」を使って円グラフを作成
Webサイトで円グラフ表示したいと要望があったので、以前使用したjqPlotでデモを作成しました。ダウンロード 最初の要望は「凡例つけて」、「いい感じにカラーリングしてほしい。」、「定期的に変更
-
-
レスポンシブ対応の画像スライダー・ギャラリー用プラグイン
画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide
-
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
-
タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」
「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。 デフォルトでは、768
-
-
入力数値の桁区切り挿入
ユーザに数値を入力してもらう際に区切りを入れるようにすると入力ミスを少なくすることができます。このソースは、SugarJSというものから拝借して少し改変しています。 実装 fu
-
-
画像をモザイク処理(ピクセル化)してくれるプラグイン「Pixelate.js」
「Pixelate.js」はその名の通り画像をピクセル化してくれるjQueryプラグインです。画面ロード時にピクセル化しておき、画像にマウスオーバーすると暴露してくれます。 ダウンロード | デモ
Comment
https://t.co/Cnc3j2WbuY
オプションの
$('#tp1').datepicker({
は
$('#tp1').timepicker({
ですね。
jQuery - 時刻入力に便利な「Timepicker for Bootstrap」 https://t.co/Yd9vsV3i2G
これ使ってみようかな 時刻入力に便利な「Timepicker for Bootstrap」 http://t.co/BNfoVxiIj1