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

2016/01/16 2017/01/31

Pocket

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

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

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

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

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

LINKClockPicker

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

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

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

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

あとは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>

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

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

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

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

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

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

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

Pocket

okutani (okutani_t) のヒトコト

okutani_t

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

Web開発のお仕事を募集しています

フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。

「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。

ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。

LINKお問い合わせ

LINKokutani's Portfolio

- Bootstrap