JavaScriptでスマホ対応のtime pickerを実装する方法
JavaScriptで時刻入力UIを実装したいけれど、既存のtime pickerは重かったり、スマホで使いにくかったりしませんか？
このページでは、jQuery不要・軽量・スマホ対応の時刻入力ダイアログ「mamtimepicker.js」を紹介します。
input要素にクラスを付けるだけで導入でき、5分刻みやreadonly対応など、実務で使いやすい工夫を盛り込んでいます。
ホイール、タップにも対応した時刻（時分）入力ダイアログで時刻を入力する（時刻ピッカー、タイムピッカー）Javascriptソースコードです。
mamtimepicker.js(17KB)ダウンロード
上記ボタンからmamtimepicker.jsをダウンロード(右クリック ⇒ 名前を付けてリンク先を保存)し、外部javascriptファイルを使えるように指定します。
<script src="./js/mamtimepicker.js"></script>
input要素(type="text")のクラス名に"mamTimePicker"を指定して設定します。
<input type="text" class="mamTimePicker" />
以上で時刻入力ダイアログが使えるようになります。
mamtimepicker.js の10行目の値を変更すれば5分刻み等に変更することが出来ます。
let per_minutes=1; //分の刻み（5分刻みで表示したいなら5、10分刻みなら10を設定)
■使用例
<script src="./js/mamTimePicker.js"></script> <input type="text" class="mamTimePicker" placeholder="hh:mm" />
スマートフォンでオンスクリーンキーボード（ソフトウェアキーボード）を表示したくない場合はreadonly 属性を追加してください。
<script src="./js/mamTimePicker.js"></script>
<input type="text" class="mamTimePicker" placeholder="hh:mm" readonly="readonly" />