JQuery Datepicker 无法正常工作答案

【问题标题】：JQuery Datepicker is not working properlyJQuery Datepicker 无法正常工作
【发布时间】：2021-06-16 13:44:35
【问题描述】：

我正在尝试在用户单击时创建一个带有日期选择器的输入框。我为日期选择器添加了 JQuery CDN，但它不起作用。

    $(document).ready(function(){
                $("#dates").datepicker();
            });

 <head>
            <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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
            <link rel="stylesheet" 
        href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384- 
        Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
            <link href="style.css" rel="stylesheet"/>
        </head>
        <body>
        <input type="text" id="dates" placeholder="enter a date">
    
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384- 
       KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
        crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384- 
       JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/6d0e0e5114.js" crossorigin="anonymous"></script>
      
    
        </body>

当我点击输入框时，什么也没有发生。有什么建议可以解决这个问题吗？

【问题讨论】：

删除 all 您的 script 标签，jquery-1.10.2.js 和 jquery-ui.js 的 2 个标签除外，它工作正常。

标签： javascript html jquery css datepicker

【解决方案1】：

<!doctype html>
<html lang="en">
<head>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

  <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384- 
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="style.css" rel="stylesheet"/>

  <script>
    $(document).ready(function(){
      $( "#dates" ).datepicker();
    } );
  </script>
</head>
<body>
 
<input type="text" id="dates" placeholder="enter a date">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384- 
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/6d0e0e5114.js" crossorigin="anonymous"></script>

</body>
</html>

实际上，你同时使用了 slim 和 normal jquery，所以你需要从 body 标签中删除 slim jquery，因为你在 head 部分使用 jquery UI，所以你不能从 head 中删除普通 jquery

【讨论】：