jQueryの「clockpicker」の使い方が分からない

###前提・実現したいこと
Monacaでアプリ開発をしているのですが、jQueryの「clockpicker」の使い方が分かりません。
clockpicker自体の実装はできたのですが、入力された時間を取得する方法が分かりませんでした。

pickerを<ons-button>で起動する方法も教えてもらえると幸いです。

###該当のソースコード

HTML
1<div id="picker" class="input-group clockpicker" data-placement="top">
2    <input type="text" class="form-control" value="9:00">
3        <span class="input-group-addon">
4            <span class="glyphicon glyphicon-time"></span>
5        </span>
6    </div>
7    
8    <script type="text/javascript">
9        $('.clockpicker').clockpicker();
10    </script>

###試したこと
ネットで調べてみたのですが、clockpickerの情報自体が少なく分かりませんでした。

行動規範の内容に同意します

回答2件

javascript
1ons.ready(function(){
2var cp = $('.clockpicker');
3cp.clockpicker({
4    afterDone: function() {
5      alert( $(".form-control").val() );
6  }
7});
8
9$('#button').click(function(e){
10    // Have to stop propagation here
11    e.stopPropagation();
12    cp.clockpicker('show');
13});
14
15
16})
17
18

html
1<div id="picker" class="input-group clockpicker" data-placement="top">
2    <input type="text" class="form-control" value="9:00">
3        <span class="input-group-addon">
4            <span class="glyphicon glyphicon-time"></span>
5        </span>
6</div>
7<ons-button id="button">ons-button</ons-button>

投稿2017/07/31 06:59

namimon

総合スコア726

Foxy

2017/07/31 07:11

できました！ありがとうございます！ jQueryの扱い方がまだ把握できていなので、今後学習していこうと思います！

行動規範の内容に同意します

ベストアンサー

Monacaについて詳しく知らないので、<ons-button>で起動する方法には回答できませんが、入力された時間の取得は以下のように行えると思います。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title>タイトル</title>
6    <link rel="stylesheet"
7          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
8    <link rel="stylesheet"
9          href="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.css">
10    <style type="text/css">
11        body {
12            padding: 500px;
13        }
14
15        .input-group {
16            margin: 10px;
17        }
18    </style>
19</head>
20<body>
21<div id="picker" class="input-group clockpicker" data-placement="top">
22    <input type="text" class="form-control" value="9:00">
23    <span class="input-group-addon">
24            <span class="glyphicon glyphicon-time"></span>
25    </span>
26</div>
27<button type="button" class="btn btn-lg btn-block" id="button1">クリック</button>
28<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
29<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
30<script src="https://cdnjs.cloudflare.com/ajax/libs/clockpicker/0.0.7/bootstrap-clockpicker.min.js"></script>
31<script>
32    $(".clockpicker").clockpicker();
33
34    $("#button1").on("click", function () {
35        alert($(".form-control").val());
36    });
37</script>
38</body>
39</html>
40