jQuery 无法使用引导日期选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22169142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to use bootstrap date picker
提问by Reinstate Monica Cellio
I was trying to add Bootstrap date pickeron an input area but I am unable to configure it:
我试图在输入区域上添加Bootstrap 日期选择器，但我无法配置它：
I used their demo pageto generate code and tried it but it seems I am missing something Please help me fixing this.
我使用他们的演示页面生成代码并尝试过，但似乎我遗漏了一些东西请帮我解决这个问题。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="../files/css/bootstrap.min.css" rel="stylesheet">
<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet">
<script src="../files/js/jquery.min.js"></script>
<script src="../files/js/bootstrap.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
<script>
$('#sandbox-container .input-group.date').datepicker({
format: "yyyy/mm/dd",
startDate: "2012-01-01",
endDate: "2015-01-01",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
</script>
</body>
</html>
采纳答案by Reinstate Monica Cellio
You only need to remove #sandbox-containerAs it is not present in your code.
您只需要删除#sandbox-container因为它不存在于您的代码中。
Try This:
尝试这个：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="../files/css/bootstrap.min.css" rel="stylesheet">
<link href="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/css/datepicker3.css" rel="stylesheet">
<script src="../files/js/jquery.min.js"></script>
<script src="../files/js/bootstrap.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
<script>
$('.input-group.date').datepicker({
format: "yyyy/mm/dd",
startDate: "2012-01-01",
endDate: "2015-01-01",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
</script>
</body>
</html>
回答by Reinstate Monica Cellio
Move the script include tags above your script, and remove #sandbox-containerfrom your selector - it doesn't exist. It works after that (with correct urls)...
将脚本包含标签移动到您的脚本上方，并#sandbox-container从您的选择器中删除- 它不存在。它在那之后工作（使用正确的网址）......
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script>
$('.input-group.date').datepicker({
format: "yyyy/mm/dd",
startDate: "2012-01-01",
endDate: "2015-01-01",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
</script>
回答by Osman M Elsayed
You are calling the datepicker function before calling jQuery, bootstrap.js & bootstrap-datepicker.js. If you debug it you will get an exception that tells you "datepicker" is not defined.
您在调用 jQuery、bootstrap.js 和 bootstrap-datepicker.js 之前调用 datepicker 函数。如果你调试它，你会得到一个异常，告诉你“datepicker”没有定义。
Instead you should write :
相反，你应该写：
<script src="../files/js/jquery.min"></script>
<script src="../files/js/bootstrap.js"></script>
<script src="http://eternicode.github.io/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script>
$('#sandbox-container .input-group.date').datepicker({
format: "yyyy/mm/dd",
startDate: "2012-01-01",
endDate: "2015-01-01",
todayBtn: "linked",
autoclose: true,
todayHighlight: true
});
</script>
