jQuery Date Picker - do not pop up
Question
I ma starting with that i am obsiously blind, but i can't find a fail in my own code, please can someone find a minute and tell me what the hell i am doing wrong?
Code looks totaly OK for me but dispite this fact it's not working ofcourse.
Code looks like:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="date-form">
<div class="form-horizontal">
<div class="control-group">
<label for="date-picker-2" class="control-label">B</label>
<div class="controls">
<div class="input-group">
<input id="date-picker-2" type="text" class="date-picker form-control" />
<label for="date-picker-2" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
</label>
</div>
</div>
</div>
<div class="control-group">
<label for="date-picker-3" class="control-label">C</label>
<div class="controls">
<div class="input-group">
<label for="date-picker-3" class="input-group-addon btn"><span class="glyphicon glyphicon-calendar"></span>
</label>
<input id="date-picker-3" type="text" class="date-picker form-control" />
</div>
</div>
</div>
</div>
<hr />
</div>
<script>
$(".date-picker").datepicker();
$(".date-picker").on("change", function () {
var id = $(this).attr("id");
var val = $("label[for='" + id + "']").text();
$("#msg").text(val + " changed");
});
</script>
And fiddle here: http://jsfiddle.net/bbm035nx/1/
Unfortunately, here we have a problem, datepicker don't even popup, looks it didn't find jquery, but WHY or what happen? I have no clue. Please guys can somebody try to look at it?
Thank you all and again sorry for stupid question.
1 answers
solution1
0 2015-02-08 20:29:13
Please take a look at the right panel. You forgot to include necessary libraries. Add them in order (jQuery > jQueryUI > Bootstrap) and it shoudl all work!
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<script src="//code.jquery.com/jquery-1.11.0.js" type="text/javascript">
<link href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css" type="text/css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js" type="text/javascript">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js" type="text/javascript">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" type="text/css" rel="stylesheet">
</head>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.