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

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

TimePickiで値変更時に関数を実行させる方法

本記事では、TimePIckiで値を変更した時に
任意の関数を実行させる方法を紹介していきます。

本記事の内容です。

TimePIckiって何?

下記の記事を参照してください。
j-levia.hatenablog.jp

サンプルコード

公式ドキュメントには載っていませんが、
on_changeに関数を渡してあげることで、
値変更時に任意の関数を実行させることができます。

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({
        on_change: function() {
            // on_changeに関数を渡してあげれば、
            // 値変更時に実行される
            alert($('#timepicker').val());
        }
    }); 
});