how to use bootstrap-datepicker sandbox

Question

i'm using angular 4, i want to use bootstrap-datepicker sandbox, heres the code :

<link rel="stylesheet" href="./assets/libs/datepicker/css/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="./assets/libs/datepicker/css/bootstrap-datepicker3.standalone.min.css">
<!-- Bootstrap -->
  <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!-- Main jQuery -->
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="./assets/libs/datepicker/js/bootstrap-datepicker.min.js"> </script>

  <div class="input-group date">
   <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
  </div>

component.ts :

 $('#sandbox-container .input-group.date').datepicker({
startDate: "-12/30/2014",
endDate: "+01/15/2015",
startView: 1,
clearBtn: true,
calendarWeeks: true,
autoclose: true,
todayHighlight: true
});

but when i click this the input text field, the datepicker doesnt appears.

Answer 1

Hope this will help you https://jsfiddle.net/m6Ls4w4w/

 $('.date').datepicker({ startDate: "-12/30/2014", endDate: "+01/15/2015", startView: 1, clearBtn: true, calendarWeeks: true, autoclose: true, todayHighlight: true }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script> <div class="input-group date"> <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> </div> 

You are giving wrong selector.

Answer 2

 $('#sandbox-container .input-group.date').datepicker({ startDate: "-12/30/2014", endDate: "+01/15/2015", startView: 1, clearBtn: true, calendarWeeks: true, autoclose: true, todayHighlight: true }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.standalone.css"> <!-- Bootstrap --> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- Main jQuery --> <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"> </script> <div id="sandbox-container"> <div class="input-group date"> <input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> </div> </div> 

The problem is the selector #sandbox-container , you have to put the calendar input into it or remove that selector.

Hope it helps!