我通过 JQuery 有 datepicker 的文本框，但 datepicker 不工作答案

【问题标题】：I have text box for datepicker via JQuery but datepicker is not working我通过 JQuery 有 datepicker 的文本框，但 datepicker 不工作
【发布时间】：2019-08-09 19:57:58
【问题描述】：

Jquery 日期选择器不工作。这是我的代码。我知道我要么丢失了一些 JS 文件，要么包含了一些覆盖 JS 文件，但我想知道是哪一个。

请检查我的代码，让我知道我缺少什么或在 js 文件中额外添加的内容会阻止 jquery datepicker。虽然，它之前可以工作，但在代码重构之后，它就停止工作了

<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./css/bootstrap-theme.css" rel='stylesheet' type='text/css' />
 <link href="./css/bootstrap.min.css" rel='stylesheet' type='text/css' /> 
<link href="./css/lightbox.min.css" rel='stylesheet' type='text/css' />
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel='stylesheet' type='text/css' /> -->
<link href="./css/chosen.css" rel='stylesheet' type='text/css' />
<link type='text/css' rel='stylesheet' href="./css/angular-bootstrap-lightbox.min.css"/>
<link href="./css/font-awesome.min.css" rel='stylesheet' type='text/css' />
<link href="./css/select2.min.css" rel='stylesheet' type='text/css' />
<link rel="stylesheet" href="./css/flexslider.css">
<link rel="stylesheet" type="text/css" href="./css/circle.css">
<link href="./css/style.css" rel='stylesheet' type='text/css' />
<script src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="./css/select2.min.css" rel='stylesheet' type='text/css' />
 <link rel="stylesheet" href="./css/flexslider.css">
 <link rel="stylesheet" type="text/css" href="./css/circle.css">
<script type="text/javascript" src="./js/formValidation.js"></script>
 <link rel="stylesheet" href="./css/style.css" crossorigin="anonymous">
 <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"  rel = "stylesheet">
 <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
 <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 <script type="text/javascript" src="./js/DatePicker.js"></script>
 <script type="text/javascript" src="./js/uploadImage.js"></script> 
</head>
<body class="bodybg">

<div class="container img-fluid">
    <form action="../CompleteRegistration" method="post"
        id="registrationForm" onsubmit="return validateCompleteRegistrationForm()"
        class="needs-validation  box text-secondary" enctype='multipart/form-data' novalidate>
        <h3 style="text-align: center; margin-top: 50px;">Complete Your
            Form</h3>
        <div style="text-align: center;"
            class="mediumtxt c7 padt4 padb15 fleft mpaddl10">Take the last
            step in finding your soulmate by providing your basic information.
            It's simple and easy.</div>
    <div class="clear-both"></div>
            <div class="col-md-4 mb-3">
                        <label for="validationCustomUsername">Date Of Birth</label> <input
                            type="text" class="form-control forFont hasDatepicker" id="userDateofBirth"
                            autocomplete="off" name="userDateofBirth"
                            placeholder="dd-mm-yyyy" aria-describedby="inputGroupPrepend"
                            required>
                        <div class="invalid-feedback">Please enter Date of Birth</div>
            </div>

        </div>
    </form>
</div>

This is my jquery code for datepicker
  $(function() {
  $( "#userDateofBirth" ).datepicker({
    changeMonth:true,
    changeYear:true,
    yearRange:"1940:currentYear",
    dateFormat: "dd-mm-yy",
      numberOfMonths:[1,1]
    });
  });

【问题讨论】：

Ctrl+Shift+i 在浏览器中打开检查元素并打开网络选项卡以查看已卸载的文件并确保加载正确的文件
我检查了网络选项卡，所有文件都正确加载
./js/DatePicker.js 这是什么？，您还包括了两个 jquery，即：./js/jquery.js 和 https://code.jquery.com/jquery-1.10.2.js。
我在删除其中一个 js 文件后尝试过，但没有运气。 DatePicker.js 是写条件的js文件
尝试将scripts一一删除并添加，并检查哪个script影响了datepicker。

标签： java jquery jsp

【解决方案1】：

检查一下，

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" rel='stylesheet' type='text/css' />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>

</head>
<body>
  
  <div >
   <input type="text"  class="form-control datepicker" readonly>
  </div>


<script>
$(document).ready(function () {
  $('.datepicker').datepicker({
      format: 'dd-M-yyyy',
  });
    
   

});
</script>
</body>
</html>

【讨论】：