ゆるふわエンジニアのブログ

行ったこと、調べたこと等をつらつらと書いていくかもしれません。

時、分を個別に入力できる時間入力コントロール(コンポーネント)(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>

JavaScript

$(function() {
    $('#timepicker').timepicki(); 
});

使い方

公式ドキュメントが下記ページにありますので、参照してください。

使い方
TimePicki - how to use jQuery Timepicker

使用できるオプション
TimePicki - use options in jQuery timepicker