jquery-clockpicker.jsを使って入力エリア(input)に時刻ピッカーを表示する方法をご紹介します。
BootstrapやjQueryを使って出来ますが今回はjQueryでやってみます。
Contents
ディスプレイ広告
入力エリア(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(入力エリア)に時刻ピッカーを表示するデモページ
ソース元:ClockPicker
以下がソース元です。
ClockPicker
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。