JavaScript

input(入力エリア)に時刻ピッカーを表示する方法【jquery-clockpicker.js】

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

ソース元:ClockPicker

以下がソース元です。
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>

jquery-clockpicker.jsを使ってinput(入力エリア)に時刻ピッカーを表示するデモページ

jquery-clockpicker.jsを使ってinput(入力エリア)に時刻ピッカーを表示するデモページ

 

※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。