時刻入力に便利な「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>
  • このエントリーをはてなブックマークに追加

関連記事

ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード デモ スクリプ

レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」

「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最

no image

グラフ作成 プラグイン

C3.js C3.js サイト [browser-shot url="http://www.chartjs.org/" width="200" imgclass=" ali

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

Twitter Bootstrap Modalは、標準のモーダルウィンドウに様々な機能を追加することができます。 2014/06/16 Bootstrap3対応版に書き換えをしました。

わずかなコードで画像をサムネイル化してくれる「MyThumbnail.js」

サムネイル化してくれるJQueryプラグインは数多くありますが、この「MyThumbnail」はわずか数行で簡単にページ上の画像を指定サイズにサムネイル化してくれます。 ダウンロード 画像とし

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

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

no image

クリックするとテキストボックスにかわるラベルを実装

Flickrなどでは、写真の編集画面でキャプションをラベルとして表示しておきクリックするとテキストボックスやテキストエリアに変換してくれて編集させるようなインターフェイスを実装しています。結構いいです

マウスオーバーでキャプション表示してくれる プラグイン

画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成

no image

ポップアップ・モーダル ウィンドウ プラグイン

ポップアップ シンプルにポップアップを実装できる「PopBox」 実装方法が選べるツールチップ用プラグイン「Smallipop」 Bootstrap Popovers

ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」

「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート

Message

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

*

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

PAGE TOP ↑