

画面に「Timepicker」の機能を実装中ですが上手くいきません。  
入力ボックスに「11:00
PM」という表示はでているのですがボタンを押そうとしても何も機能していない形です。ボタンをクリックして時間を選べるようにするにはどう修正したらよろしいでしょうか。  
以前から使っている「<http://getbootstrap.com/getting-
started/#download>」からダウンロードしたbootstrapを使っています。  
そして今回timepickerの機能を追加したいので「<https://github.com/jdewit/bootstrap-
timepicker/releases>」の中からv0.5.2をダウンロードし、  
timepickerに必要そうなファイルを  
「bootstrap-timepicker.min.css  
js/bootstrap-timepicker.min.js」を以前から使っているbootstrapにコピーして実装しています。

[code]

    <!DOCTYPE html>
    <html lang="ja">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <title>タイムペッカー</title>
    
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link type="text/css" href="css/bootstrap-timepicker.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
      </head>
      <body>
        <div class="container">
    
          <div class="input-group bootstrap-timepicker timepicker">
                <input id="timepicker1" type="text" class="form-control input-small">
                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
            </div>
    
            <script type="text/javascript">
                $('#timepicker1').timepicker();
            </script>
        </div>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2016-12-04T14:27:07.477
30889
2016-12-05T07:50:00.730
2016-12-04T23:00:44.027
2238
17348
question
jquery html5 bootstrap
Timepickerが機能しない。


bootstrap-timepickerのlinkタグに`rel="stylesheet"`属性を指定していないためです。  
以下のように指定すると動作します。

[code]

    $('#timepicker1').timepicker();
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/js/bootstrap-timepicker.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-timepicker/0.5.2/css/bootstrap-timepicker.min.css" rel="stylesheet"/>
    <div class="container">
        <div class="input-group bootstrap-timepicker timepicker">
            <input id="timepicker1" type="text" class="form-control input-small">
            <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
        </div>
    </div>
[/code]


CC BY-SA 3.0
2016-12-05T07:50:00.730
30922
2016-12-05T07:50:00.730
19759
30889
answer