こんにちは、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で時間入力のフォームを利用するときの、参考になれば幸いです。