web-dev-qa-db-ja.com

bootstrap datepicker日付範囲がカレンダーに表示されない

以下のスニペットにbootstrap datepicker date-rangeを実装しましたが、開始日と終了日の日付を選択した後、カレンダーに範囲が表示されません。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page 2</title>

</head>
<body>
        <div class="input-group input-daterange">
                <input id="startDate1" name="startDate1" type="text"
                        class="form-control" readonly="readonly"> <span
                        class="input-group-addon"> <span
                        class="glyphicon glyphicon-calendar"></span>
                </span> <span class="input-group-addon">to</span> <input id="endDate1"
                        name="endDate1" type="text" class="form-control" readonly="readonly">
                <span class="input-group-addon"> <span
                        class="glyphicon glyphicon-calendar"></span>
                </span>
        </div>

        <script
                src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
        <script type="text/javascript">
                $(document).ready(function() {
                        $('.input-daterange input').each(function() {
                                $(this).datepicker();
                        });
                });
        </script>
</body>
</html>
javascriptjquerytwitter-bootstrapdatepicker
7
user3429531

bootstrap-datepicker cssリソースも追加する必要があります。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />

日付範囲には以下の構文を使用します。

 $('.input-daterange').datepicker({});

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" />
  <script     
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.standalone.min.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Page 2</title>

</head>
<body>
        <div class="input-group input-daterange">
                <input id="startDate1" name="startDate1" type="text"
                        class="form-control" readonly="readonly"> <span
                        class="input-group-addon"> <span
                        class="glyphicon glyphicon-calendar"></span>
                </span> <span class="input-group-addon">to</span> <input id="endDate1"
                        name="endDate1" type="text" class="form-control" readonly="readonly">
                <span class="input-group-addon"> <span
                        class="glyphicon glyphicon-calendar"></span>
                </span>
        </div>

        <script
                src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
        <script type="text/javascript">
                $(document).ready(function() {
                         $('.input-daterange').datepicker({
              });
                });
        </script>
</body>
</html>
20
Deep