CODEWITHSUNDEEP
twitter-bootstrap-3bootstrap-datepicker
Jigar Naik
Jigar Naik

Reputation: 1994

Bootstrap3 date picker does not work

I am trying bootstrap3 date picker but it does not show up calendar or it does not even show any javascript error when i click on textbook.

Below is my code for showing up calendar. 

enter code here
<!DOCTYPE html>
<html lang="en">
<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 -->
<link href="css/bootstrap-datepicker3.css" rel="stylesheet">

<script src="js/jquery.js"></script>  
<script src="js/bootstrap.min.js"></script>    

<!-- Date Picker -->  
<script src="js/bootstrap-datepicker.js"></script>
</head>
<body>

<input type="text" class="form-control" id="sandbox-container">

<script>
$(function() {
$('#sandbox-container input').datepicker();
});
</script>
</body>
</html>

Upvotes: 0

Views: 422

Answers (1)

acrobat
acrobat

Reputation: 2259

You jquery selector is wrong and should just be $('#sandbox-container')

This should be your code (including working example):

$(function() {
    $('#sandbox-container').datepicker({
        //..
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/js/bootstrap-datepicker.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.0/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<input type="text" class="form-control" id="sandbox-container">

Upvotes: 1

Related Questions