jquery-clockpicker.jsを使って入力エリアに時刻ピッカーを表示する方法｜DAD UNION

jquery-clockpicker.jsを使って入力エリア（input）に時刻ピッカーを表示する方法をご紹介します。
BootstrapやjQueryを使って出来ますが今回はjQueryでやってみます。

Contents

入力エリア（input）に時刻ピッカーを表示するるCSSの記述
入力エリア（input）に時刻ピッカーを表示するHTMLの記述
jquery-clockpicker.jsを使って入力エリア（input）に時刻ピッカーを表示するJavaScriptの記述
jquery-clockpicker.jsを使ってinput（入力エリア）に時刻ピッカーを表示するデモページ
ソース元：ClockPicker

入力エリア（input）に時刻ピッカーを表示するるCSSの記述

※jquery-clockpicker.min.cssファイルを読み込みます。入力エリア（.input-group）のCSS記述です。必要に応じて変更して下さい。

<style type="text/css">
body{
  text-align: center;
}
h1{
  text-align: center;
  font-size: 22px;
  padding: 20px 0;
  line-height: 2em;
}
.input-group{
  width: 200px;
  margin: 0 auto;
}
</style>
<link rel="stylesheet" type="text/css" href="jquery-clockpicker.min.css">

入力エリア（input）に時刻ピッカーを表示するHTMLの記述

※入力エリア（class=”input-group clockpicker”）にinputタグを用意します。必要に応じて変更して下さい。

<h1>jquery-clockpicker.jsを使ってinput（入力エリア）に時刻ピッカーを表示します。<br>以下の入力エリアにマウスを選択すると時刻ピッカーが表示されます。</h1>
<div class="input-group clockpicker">
    <input type="text" class="form-control" value="07:30">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>

jquery-clockpicker.jsを使って入力エリア（input）に時刻ピッカーを表示するJavaScriptの記述

※jquery.min.js、jquery-clockpicker.min.jファイルを読み込みます。$(‘入力エリア’).clockpicker()で入力エリアに時刻ピッカーを表示します。

<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-clockpicker.min.js"></script>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>