bootstrap3 bootstrap-timepickerについて

###前提・実現したいこと
いつもお世話になっております。

bootstrap3でbootstrap-timepickerは利用できないのでしょうか？
いろいろとホームページを参考に作業していますが、どうにもうまく行きません。
もし、bootstrap3で使えないなら、これ以上頑張っても解決できないので、
まずは、利用できるかどうか知りたくて投稿しました。

また、bootstrap3で、timepickerを利用するには、どうすればいいでしょうか？
参考になるホームページ等があれば、ぜひ教えてください。

どうぞよろしくお願いします。

###発生している問題・エラーメッセージ

テキストエリアをクリックしても、タイムコントロールが表示されない。
変な形のアイコンが表示されてクリックできない。
![イメージ説明](5a78533a474a117900f8fdeee8b68298.png)

###該当のソースコード（一部抜粋）

<!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">
    <!-- BootstrapのCSS読み込み -->
    <link type="text/css" rel="stylesheet" href="css/bootstrap.min.css">
<!--     <link type="text/css" rel="stylesheet" href="css/timepicker.css"> -->
	<link type="text/css" rel="stylesheet" href="css/bootstrap-timepicker.css" />
	<link type="text/css" rel="stylesheet" href="css/bootstrap-datepicker.min.css.css" />
	
<!-- 	<link type="text/css" rel="stylesheet" href="css/bootstrap-datetimepicker.min.css"> -->
    <!-- jQuery読み込み -->
<!--     <script type="text/javascript" src="/js/jquery-1.11.3.min.js"></script> -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/bootstrap-timepicker.js"></script>

##########################################################
	
	       		<div class="form-group">
	        <div class="input-group bootstrap-timepicker timepicker">
            	<input type="text" class="form-control timepicker5" name="stime" id="id_stime" value="">
				<span class="input-group-addon">
					<span class="glyphicon glyphicon-time" aria-hidden="true"></span>
				</span>

	        </div>
       		</div>
       		
<!-- jQueryが読み込まれないテーマの場合コメントを解除 -->
<script src="js/bootstrap-datepicker.min.js"></script>
<script src="js/bootstrap-datepicker.ja.min.js"></script>

<script type="text/javascript">
	$('.datepicker').datepicker({
    	language: 'ja',
		format: "yyyy/mm/dd",
		autoclose: true
		});
    $('.timepicker5').timepicker({
        showInputs: false,
        minuteStep: 15,
        showMeridian: false
	});
</script>

###試したこと
順番変えたり、いろいろと試しました。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

kei344

2017/04/17 06:14

プラグイン／ライブラリは似た名前のものもあるため、取得した場所のURLを質問文に追記ください。（URLにはリンクを張ることができます）

tsuru0508

2017/04/17 15:12

ありがとうございます！

kei344

2017/04/17 15:50

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況を質問文に追記ください。

tsuru0508

2017/04/17 22:04

ありがとうございます。今は、動作はしましたが、縦の列がずれていて解決方法を探しています。また、煮詰まったらご相談させて頂きます。いつも、本当にありがとうございます

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

回答1件

ベストアンサー

Bootstrap v3.3.1では稼働する事が確認できました。
おそらくですが、input要素に対して、下記の様にdata-provide="timepicker"を追加すれば動きそうですね。

html
1<input type="text" class="form-control timepicker5" name="stime" data-provide="timepicker" id="id_stime" value="">

サンプル

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <title>bootstrapTest</title>
5        <meta charset="UTF-8">
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
8        <link href="css/bootstrap-timepicker.min.css" rel="stylesheet">
9        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
10        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
11        <script src="js/bootstrap-timepicker.min.js"></script>
12    </head>
13    <body>
14        <div class="input-group bootstrap-timepicker timepicker">
15            <input id="timepicker" class="form-control" data-provide="timepicker" data-template="modal" data-minute-step="1" data-modal-backdrop="true" type="text"/>
16        </div>
17    </body>
18</html>

投稿2017/04/17 06:13

motuo

総合スコア3027

tsuru0508

2017/04/17 15:12

motuoさまありがとうございます！無事動作しました。 kei344さまありがとうございます。どこも同じソースが公開されていると思っていました。 http://jdewit.github.io/bootstrap-timepicker/ からのJSとCSSで統一したら、無事動作しました。お二方、ありがとうございました。

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