時、分を個別に入力できる時間入力コントロール(コンポーネント)(TimePIcki)
本記事では、時、分を個別に入力できる時間入力コントロール、
TimePickiについて紹介していきます。
本記事の内容です。
TimePIckiとは?
jQueryのTimePIckierプラグインです。公式ページに実際に動作するデモがありますので、
触って感触を掴んでみてください。
senthilraj.github.io
ライセンス
MITライセンスです。github.com
使用するための準備
jQueryのプラグインですので、jQueryが必要です。下記のページからダウンロードしてください。
jquery.com
TimePIckiは下記ページからダウンロードできます。
jsファイルやcssファイルだけでなく、
imagesフォルダも必要になるので、jsファイルを保存する
フォルダと同階層にimagesフォルダをコピーしてください。
github.com
サンプルコード
HTML<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/timepicki.css" /> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/timepicki.js"></script> <script src="js/index.js"></script> </head> <body> <input type="text" id="timepicker"> </body> </html>
$(function() { $('#timepicker').timepicki(); });
使い方
公式ドキュメントが下記ページにありますので、参照してください。使い方
TimePicki - how to use jQuery Timepicker
使用できるオプション
TimePicki - use options in jQuery timepicker