vdeep

*

vdeepはプログラミング、IT、Web技術、ライフハックの事などなどを管理人okutaniがつぶやくブログです。月間11万PV〜。

「ClockPicker」を使ってBootstrapでカッコいい時間入力を実装する

      2017/01/31

LINEで送る
Pocket

こんにちは、okutani(@okutani_t)です。仕事でカッコいい時間入力フォームを使う機会があったので、本記事で紹介しておきます。

ClockPicker」というもので、時計の形をした時間入力フォームをサクッと作成することができます。

スマートフォンでも問題なく利用することができるので、直感的でカッコいい時間入力フォームを実装したいときに参考にしてください。

スポンサーリンク

ClockPickerでカッコいい時間入力フォームを実装する

まず、下記サイトからClockPickerの本体をダウンロードしましょう。

LINKClockPicker

bootstrap-clockpicker

解凍した中身は次のとおり。

bootstrap-clockpicker2

デモのHTMLファイルなどは不要なので、ここでは必要なファイルだけ抜き出して利用しましょう。

利用するファイルは「dist」ディレクトリの中にある「bootstrap-clockpicker.min.css」「bootstrap-clockpicker.min.js」のふたつです。

これらを使いたいプロジェクトの配下に設置します。

bootstrap-clockpicker3

あとはBootstrapの本体が必要です。Bootstrap本体がないとレイアウトが崩れます。

今回はCDNでさっくり導入してみました。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

同じようにjQuery本体もCDNで導入しておきます。

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

アイコンはglyphiconでも良いのですが、個人的にfontawesomeの方が好きなので、CDNで導入しておきます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

ソースコードは次のとおりです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>clockpicker</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="bootstrap-clockpicker.min.css">
  </head>
  <body>

    <div class="input-group clockpicker col-sm-2">
      <input type="text" class="form-control" value="09:30">
      <span class="input-group-addon">
        <i class="fa fa-clock-o"></i>
      </span>
    </div>

    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="bootstrap-clockpicker.min.js"></script>
    <script>
     $(function() {
       $('.clockpicker').clockpicker();
     });
    </script>
  </body>
</html>

上記のように設置すれば、次のようにオシャレな時間入力フォームが利用できます。

bootstrap-clockpicker4

分はドラッグすることで、一分単位で指定が可能です。

bootstrap-clockpicker5

直感的に時間入力フォームを利用できるので便利ですね。

おまけ: 表示が被ってしまうのを防ぐ

まれに、ClockPicker下にあるフォームが時計に被さってしまう場合があります。CSSで次のように指定してあげれば、被せを防ぐことができます。

.clockpicker{
     z-index: 10000 !important;
     position: relative;
}

Bootstrapで時間入力のフォームを利用するときの、参考になれば幸いです。

この記事が気に入ったら
いいね ! しよう

Twitter で
LINEで送る
Pocket

okutani (@okutani_t) のヒトコト
ClockPickerのようなカッコいい入力フォームを使うとワクワクしますね!ぜひ普通のフォームに飽きてしまったら使ってみてください。

 - Bootstrap

スポンサーリンク

PC用AdSense

PC用AdSense

Share
  • このエントリーをはてなブックマークに追加

  こちらの関連記事もどうぞ

BootstrapのUIキット「Flat UI」がオシャレでオススメな件

こんにちは、okutani(@okutani_t)です。みなさんBootstra …

Bootstrapのfileアップロードフォームがダサいから装飾してみた

こんにちは、okutani(@okutani_t)です。Bootstrapデフォ …

Bootstrapの導入方法&初期設定まとめ

こんにちは、okutani(@okutani_t)です。みなさんはBootstr …

vdeepのトップページへ戻る画像です。風船の形をした島を女の子が掴んでいます。