个人中心
gpt4 book ai didi

javascript - 日期选择器上未捕获的 TypeError : $(. ..).datepicker 错误

转载 作者：行者123 更新时间：2023-11-28 15:04:24 25 4
gpt4 key购买 nike

所以我想要一个文本字段，其中会弹出日历，用户可以轻松选择日期。但是，当我尝试调试日历未弹出的原因时，出现 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>

请问有人能让我知道我做错了什么吗？谢谢。

最佳答案

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

如果您删除其中的第二个和第三个包含内容，您的代码就可以工作，正如您在展开并运行此代码段时所看到的那样:

<!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>

关于javascript - 日期选择器上未捕获的 TypeError : $(. ..).datepicker 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39762650/

25 4 0
文章推荐： javascript - 具有许多功能的 JQuery 选择器无法正常工作
文章推荐： javascript - 使用循环获取每个子项的样式属性
文章推荐： javascript - 无法使用 Angular Material 自动完成读取未定义的属性 'then'
文章推荐： javascript - 如何等待一个函数完成后再继续？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com