未捕获的 TypeError: $(...).datepicker 上 datepicker 错误答案

【问题标题】：Uncaught TypeError: $(...).datepicker error on datepicker未捕获的 TypeError: $(...).datepicker 上 datepicker 错误
【发布时间】：2017-02-07 07:52:03
【问题描述】：

所以我想要一个文本字段，其中会弹出一个日历并且用户可以轻松地选择一个日期。但是，当我尝试调试日历没有弹出的原因时，我收到了Uncaught TypeError: $(...).datepicker is not a function 错误。

以下是我的代码，请多多指教。我什至在这个论坛上搜索过，但无法解决。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>date</title>

    <!-- Fonts -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

    
</head>
<body id="app-layout"  class="fuelux">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">

                <!-- Collapsed Hamburger -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- Branding Image -->
            </div>

            <div class="collapse navbar-collapse" id="app-navbar-collapse">
                <!-- Left Side Of Navbar -->
                <ul class="nav navbar-nav">
                    <li><a href="#" class="log" style="color:white">Sisimsha Booking Engine</a></li>
                </ul>             
            </div>
        </div>
    </nav>

<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-5 col-xs-12">
 <div class="form-group{{ $errors->has('date') ? ' has-error' : '' }}">
    <label for="Event Date">Event Date</label>
    <input name="date" type="text" class="form-control" id='datepicker'  placeholder="Date" 
 </div>  
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
<a href="coupleDetails" class="btn btn-primary"> Back </a>
<input type="submit" class="btn btn-primary pull-right" value="Next">
</div>
</div>
    </form>
  </div>
</div>
</div>
</div>

    <!-- JavaScripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
   <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 <script>
  $(function() {
    $( "#datepicker" ).datepicker().datepicker( "option", "dateFormat", 'yy-mm-dd');
  });
  </script>
</body>
</html>

请问，有人能告诉我我做错了什么吗？谢谢。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap-3 datepicker

【解决方案1】：

您包含了三个不同的 jQuery.js 副本，其中一个在之后包含 jQuery-ui.js，因此当您使用 $ 时，您将获得第三个没有 jQuery-UI 的实例.

如果您删除其中的第二个和第三个包含，您的代码将起作用，您可以查看是否展开并运行此 sn-p：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>date</title>

    <!-- Fonts -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700">

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">

    
</head>
<body id="app-layout"  class="fuelux">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="container">
            <div class="navbar-header">

                <!-- Collapsed Hamburger -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
                    <span class="sr-only">Toggle Navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <!-- Branding Image -->
            </div>

            <div class="collapse navbar-collapse" id="app-navbar-collapse">
                <!-- Left Side Of Navbar -->
                <ul class="nav navbar-nav">
                    <li><a href="#" class="log" style="color:white">Sisimsha Booking Engine</a></li>
                </ul>             
            </div>
        </div>
    </nav>

<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-5 col-xs-12">
 <div class="form-group{{ $errors->has('date') ? ' has-error' : '' }}">
    <label for="Event Date">Event Date</label>
    <input name="date" type="text" class="form-control" id='datepicker'  placeholder="Date" 
 </div>  
</div>
</div>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12">
<a href="coupleDetails" class="btn btn-primary"> Back </a>
<input type="submit" class="btn btn-primary pull-right" value="Next">
</div>
</div>
    </form>
  </div>
</div>
</div>
</div>

    <!-- JavaScripts -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 <script>
  $(function() {
    $( "#datepicker" ).datepicker().datepicker( "option", "dateFormat", 'yy-mm-dd');
  });
  </script>
</body>
</html>

【讨论】：

【解决方案2】：

您加载的 jQuery 不是一次，而是三次次。 jQuery UI 在第二个实例之后但在第三个之前加载，因此它附加到第二个实例。但是，由于第三个实例是最后加载的，它的 $ 变量（没有附加 jQuery UI）会影响其他实例，因此您不能使用 jQuery UI。

解决方案很简单：只需删除两个 jQuery 版本，您的代码应该可以正常工作！

（您还包含了 Bootstrap 两次；您需要更加小心，不要多次包含脚本和样式表，因为它们可能会以意想不到的方式相互干扰。）

【讨论】：

【解决方案3】：

请使用此运行代码。希望对您有所帮助。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#datetimepicker').datepicker();
    })
</script>

<input id="datetimepicker" type="text">

【讨论】：

请在你的回答中加上一些解释，否则很难理解它和问题中的代码有什么区别。
OP 的日期格式选项发生了什么变化？为什么要更改元素 ID？为什么 OP 的代码不起作用？
感谢@Frxstrem 这是非常简单的文本框ID名称是datetimepicker，它通过jquery方法。
@nnnnnn 用于格式化 $("#datepicker").datepicker({ dateFormat: "yy-mm-dd" }).val()