我尝试使用日期选择器，但它不起作用。
我有这个错误：$(...).datepicker不是函数
我使用了很多框架和librairy（Adminlte，bootstrap，chartjs，datatable）。我认为他们之间存在冲突。
$(document).ready(function() {
$('#datepicker').datepicker();
$('#datepicker').on("changeDate", function() {
$('#my_hidden_input').val(
$('#datepicker').datepicker('getFormattedDate')
);
});
});<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="./css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="./css/skin-black-light.css">
<!-- CSS Table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<!-- My Style -->
<link rel="stylesheet" href="./css/style_general.css">
<link rel="stylesheet" href="./css/style.css">
<link rel="stylesheet/less" type="text/css" href="./less/dropdown.less" />
<link rel="stylesheet/less" type="text/css" href="./less/sprites.less" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<div class="form-group">
<label>Date</label>
<div class="input-group date margin-bottom-10" id="datetimepicker1">
<input type="text" class="form-control" id="date" name="date" placeholder="DD/MM/YYY">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
<!-- jQuery 2.2.3 -->
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="./js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="./js/app.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="./js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="./js/demo.js"></script>
<!-- SlimScroll 1.3.0 -->
<script src="./js/jquery.slimscroll.min.js"></script>
<!-- JS table -->
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="./js/test_table.js"></script>
<script src="./js/js.js"></script>
</body>
</html>
答案 0 :(得分：4)
确保在您使用它的页面上包含该datapicker.js库。确保链接/本地文件存在。如果您使用bootstrap / framework，它可能是从不同文件加载的。
这是最常见的原因。
答案 1 :(得分：4)
我认为 datepicker 在JQuery UI中可用，但您没有包含这些库文件。当我包含以下文件时，没有此类错误 $（...）。datepicker
请包含这些文件并检查
[link] https://code.jquery.com/ui/1.12.1/jquery-ui.js
[link] https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css
答案 2 :(得分：3)
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
var j = jQuery.noConflict();
j( function() {
j( "#datepicker" ).datepicker();
} );
</script>
请这样试试。它工作正常。 jquery定义并使用了相同的对象，因此上面的冲突试图使其工作正常。
答案 3 :(得分：0)
您可以这样关注。这对我有用。
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
我使用的日期选择器的JS编码。
<script>
$(document).ready(function(){
// alert ('Cliecked');
var date_input=$('input[name="orangeDateOfBirthForm"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'dd/mm/yyyy',
container: container,
changeYear: true,
changeMonth: true,
todayHighlight: true,
autoclose: true,
yearRange: "1930:2100"
};
date_input.datepicker(options);
});
</script>
HTML编码：
<input type="text" id="orangeDateOfBirthForm" name="orangeDateOfBirthForm" class="form-control validate" required>
<label data-error="wrong" data-success="right" for="orangeForm-email">Date of Birth</label>
答案 4 :(得分：0)
与 jQuery 和 Datepicker 一起使用没有冲突。
这个错误 - “$().datepicker is not a function” - 由于加载了第二个 jQuery 实例，几乎总是一个冲突。
寻找在某处加载的第二个 jQuery 实例。
答案 5 :(得分：-1)
我已经浏览了所有的js文件。
注意到您正在使用AdminLTe作为js和css。
在这种情况下，请再次检查左侧面板中Forms > Advanced Elements中的示例。
我认为您错过了bootstrap datepicker：尝试在AdminLTe中搜索此js文件示例：<link rel="stylesheet" href="../../plugins/datepicker/datepicker3.css">
答案 6 :(得分：-1)
如果datepicker由于jquery冲突而无法工作，请尝试这种方式。它将起作用。
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
(function($){"use strict";
var $window=$(window)
var datepick=$('.date-pick')
if($(datepick).length){$(datepick).datepicker({format:"dd/mm/yyyy"});}
})(jQuery);
});
</script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script> <!-- datepicker js-->
答案 7 :(得分：-2)
Inclue JqueryUI
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>