時刻入力に便利な「Timepicker for Bootstrap」

「Timepicker for Bootstrap」は、テキストボックスへの時刻入力を便利にしてくれるjQueryプラグインです。

2014/06/16 Bootstrap3対応版に書き換えをしました。

Bootstrap2版はこちら
Datepicker for Bootstrap (別記事)

実装方法

ダウンロード / サンプル (v0.2.6)

スクリプト

<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 時計型
  • このエントリーをはてなブックマークに追加

関連記事

no image

数値入力に便利なステッパーを実装「Numeric Stepper」

「Numeric Stepper」は、数値用のステッパーを実装できるjQueryプラグインです。ダウンロード | デモ スクリプト 実装 既存のテキストボックスにclas

表示パターン豊富なスライダー「flexslider 2」

「flexslider 2」は、シンプルに実装でき、かつカスタマイズ機能が豊富なスライダー用プラグインです。 flexslider 2 オプションや機能 サムネイルナビゲーション 複数表示

no image

[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

「jTruncate」は、長くなってスペースをとってしまう文章をなどであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト

「jqPlot」 カスタマイズ

以前、ここで使用した「jqPlot」ですが、色々なキーワードで訪問される方がいらっしゃったので、それを元ネタとして使わせてもらいカスタマイズ方法を紹介したいと思います。 以下4つのファイルへリンクし

クレジットカード番号のバリデーションとカード会社を特定してくれる「jQuery Credit Card Validator」

「jQuery Credit Card Validator」は、クレジットカード番号のバリデーションを行ってくれるjQueryプラグインです。入力したカード番号の検証とそれに基づいてカード会社の表示を

Lightboxプラグイン「Boxer」

「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイ

シンプルにモーダルウィンドウを実装できる「leanModal」

「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思いま

no image

テーブル・リスト要素を便利にしてくれるプラグイン

レスポンシブに対応したテーブルを実装できる「FooTable」 リストをインクリメント検索・ソートできる「List.js」 colResizable #カラム幅可変

no image

シンプルな画像スライダー/ギャラリー用プラグイン

スライダーやギャラリーを実装できるjQueryプラグインのうちシンプルなものを集めてみました。ベースはシンプルですが、オプションなどを使用してカスタマイズが豊富なものもたくさんありますね。 シン

Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2)

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 Twitter Bootstrap純正スクリプト ダウンロード / サイト

Comment

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑