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

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

目次

  1. 実装方法
  2. モダール形式
  3. Datepicker for Bootstrap (別記事)

実装方法

ダウンロード

スクリプト

<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">

実装

<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>

モダール形式

選択箇所をモーダルウィンドウで表示するサンプルをつくってみました。bootstrapのmodalを使用するようで、bootstrap.jsの読み込みが必要です。bootstrap-modal.jsだけでもOK サンプル

スクリプト

<link href="css/timepicker.css" type="text/css" rel="stylesheet">
<script src="jquery.min.js" type="text/javascript">
<script src="js/bootstrap.min.js" type="text/javascript">
<script src="js/bootstrap-timepicker.js" type="text/javascript">

実装

<input id="tp2" maxlength="8" type="text">

<script type="text/javascript">
$(function() {
    $('#tp2').datepicker({
        template: 'modal',
    });
});
</script>
  • このエントリーをはてなブックマークに追加

関連記事

レスポンシブ対応の画像スライダー・ギャラリー用プラグイン

画像スライダー(ギャラリー)を作成してくれるjQueryプラグインの中からレスポンシブ対応のものをいくつか集めてみました。 シンプルでカスタマイズ豊富なスライダー用プラグイン「bxSlide

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

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

no image

要素を折りたたみできる「nestedAccordion」

「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち

no image

テキストエリアを自動的にリサイズしてくれる「Autosize」

「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し

no image

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

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

no image

定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」

PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなや

マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト

画像ギャラリーを実装できる「Galleria」

Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな~と思い試してみました。 ナビゲーション内にサムネイルを

「jqPlot」 カスタマイズ

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

親要素の大きさに合わせて画像をリサイズ「imgLiquid」

「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装

Message

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

*

PAGE TOP ↑