Uncaught TypeError: $ (...). Datepicker не является функцией

-5

Я новичок в jquery.I am get Uncaught TypeError: $ (...). Datepicker не является функцией ошибки при попытке выполнить следующий код , Я ссылался на множество решений в переполнении стека, но не смог получить решение. Пожалуйста помоги.

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

 
    $("#btn1").click(function(e) { 
 
     e.preventDefault(); 
 
     if ($("#inputEmail").val() == "" || $("#inputEmail").val().length < 5) { 
 
      $("#inputEmail").addClass("error"); 
 
      $("#inputEmail").val('');       
 
     } 
 
     else if ($("#inputPassword").val() == "" || $("#inputPassword").val().length < 5) { 
 
      $("#inputPassword").addClass("error"); 
 
      $("#inputPassword").val(''); 
 
     } 
 
     else { 
 
      $("#inputEmail").removeClass("error"); 
 
      $("#inputPassword").removeClass("error"); 
 
     } 
 

 
     if(jQuery("#check1").is(":checked")&&$("#inputEmail").val() == "" || $("#inputEmail").val().length < 5) { 
 
      alert('Please enter correct passowrd and email'); 
 
     } 
 
     else { 
 
      alert('welcome'+$("#inputEmail").val()+'Your password is'+$("#inputPassword").val()); 
 
     } 
 
    }); 
 
}); 
 
</script>

<style type="text/css"> 
 
.error 
 
    { 
 
    border-color:#F00; 
 
} 
 
.noterror 
 
{ 
 
    border-color:#FFF; 
 
} 
 
    
 
    </style>


 
<!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"> 
 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 
    <link rel="icon" href="http://getbootstrap.com/favicon.ico"> 
 

 
    <title>Navbar Template for Bootstrap</title> 
 
    
 
     
 
    <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">  
 
    <link href="http://getbootstrap.com/examples/navbar-static-top/navbar-static-top.css" rel="stylesheet"> 
 
    <link href="http://getbootstrap.com/examples/navbar/navbar.css" rel="stylesheet"> 
 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/start/jquery-ui.css" rel="stylesheet"> 
 
     
 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"></script> 
 
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
    <script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"></script>  
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    
 

 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 
    
 
     </head> 
 

 

 
<body> 
 

 

 
    <div class="container"> 
 

 
     <!-- Static navbar --> 
 
     <nav class="navbar navbar-default navbar-static-top"> 
 
     <div class="container"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Srivatsava Project</a> 
 
     </div> 
 
     <div id="navbar" class="navbar-collapse collapse"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#about">About</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
      <li class="dropdown"> 
 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
       <ul class="dropdown-menu"> 
 
       <li><a href="#">Action</a></li> 
 
       <li><a href="#">Another action</a></li> 
 
       <li><a href="#">Something else here</a></li> 
 
       <li role="separator" class="divider"></li> 
 
       <li class="dropdown-header">Nav header</li> 
 
       <li><a href="#">Separated link</a></li> 
 
       <li><a href="#">One more separated link</a></li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="http://getbootstrap.com/examples/navbar/">Default</a></li> 
 
      <li class="active"><a href="http://getbootstrap.com/examples/navbar-static-top/">Static top <span class="sr-only">(current)</span></a></li> 
 
      <li><a href="http://getbootstrap.com/examples/navbar-fixed-top/">Fixed top</a></li> 
 
      </ul> 
 
     </div><!--/.nav-collapse --> 
 
     </div> 
 
    </nav> 
 

 
    <div class="container"> 
 

 

 
    <div class="jumbotron1"> 
 
     <h1>Login page</h1> 
 
     <div class="con"> 
 

 
     <form class="form-signin" id="#sign-in"> 
 
     <h2 class="form-signin-heading">Please sign in</h2> 
 
     <br/> 
 
     
 
     <label for="inputEmail" class="sr-only">Email address</label> 
 
     <input type="email" id="inputEmail" class="form-control" placeholder="Email" required="" autofocus="" style="height:50px;width:200px;"> 
 
     <br/> 
 
     
 
     <label for="inputPassword" class="sr-only">Password</label> 
 
     <input type="password" id="inputPassword" class="form-control" placeholder="Password" required="" autofocus="" style="height:50px;width:200px;"> 
 
     <br/> 
 
     <br/> 
 
     <div class="checkbox"> 
 
      <label> 
 
      <input type="checkbox" id="check1" value="remember-me" style="float:right"> Remember me 
 
      </label> 
 
     </div> 
 
     <button class="btn btn-lg btn-primary btn-block" type="button" id="btn1" style="height:50px;width:200px;">Sign in</button> 
 
     </form> 
 
     <br/> 
 
     <br/> 
 
     <p>Date: <input type="text" id="datepicker"></p> 
 
     <br/> 
 
     <br/> 
 
     <a class="btn btn-lg btn-primary" href="http://getbootstrap.com/components/#navbar" role="button">View navbar docs &raquo;</a> 
 
    </div> <!-- /container --> 
 
      
 
     </div> 
 
     <!-- Main component for a primary marketing message or call to action --> 
 
     
 

 
    </div> <!-- /container --> 
 

 

 
     <!-- Main component for a primary marketing message or call to action --> 
 
     
 

 
    <!-- /container --> 
 

 

 
    <!-- Bootstrap core JavaScript 
 
    ================================================== --> 
 
    <!-- Placed at the end of the document so the pages load faster --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script> 
 
    <script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
 
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> 
 
    <script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script> 
 
    </body> 
 
</html>

источник

2015-12-07 PSV

У вас есть две версии JQuery на одной странице. – Jai

... и загружают только jQuery UI в первый из них, как раз перед тем, как он будет перезаписан вторым. –

не получил u T.J Crowder? – PSV

Я добавил следующий код, чтобы избежать конфликта и работал отлично

$.noConflict(); 
jQuery(document).ready(function($) { 
    // Code that uses jQuery's $ can follow here. 
});

источник

2015-12-07 10:31:57 PSV

Чтобы решить эту ошибку

Error "Uncaught TypeError: $(...).datepicker is not a function"

Вместо

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

Использование

$.noConflict(); 
jQuery(document).ready(function ($) { 
    $("#fecha").datepicker(); 
});

источник

2017-02-15 16:18:32

Я также делал то же самое в CSHTML страницы и получаю ошибку .Затем я сделал ниже вещи

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

источник

2017-04-14 06:56:28

Uncaught TypeError: $ (...). Datepicker не является функцией

ответ

Смежные вопросы