title: Uncaught TypeError: $(...).datepicker is not a function
body: <p>I am newbie to jquery.I am getting Uncaught TypeError: $(...).datepicker is not a function error while trying to execute the following code. I referred many solutions in stack overflow but couldn't get the solution. Please help.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      $(function() {
          $( "#datepicker" ).datepicker();
      });
  
      $("#btn1").click(function(e) {
          e.preventDefault();
          if ($("#inputEmail").val() == "" || $("#inputEmail").val().length &lt; 5) {
              $("#inputEmail").addClass("error");
              $("#inputEmail").val('');                        
          }
          else if ($("#inputPassword").val() == "" || $("#inputPassword").val().length &lt; 5) {
              $("#inputPassword").addClass("error");
              $("#inputPassword").val('');
          }
          else {
              $("#inputEmail").removeClass("error");
              $("#inputPassword").removeClass("error");
          }
  
          if(jQuery("#check1").is(":checked")&amp;&amp;$("#inputEmail").val() == "" || $("#inputEmail").val().length &lt; 5) {
              alert('Please enter correct passowrd and email');
          }
          else {
              alert('welcome'+$("#inputEmail").val()+'Your password is'+$("#inputPassword").val());
          }
      });
  });
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> &lt;style type="text/css"&gt;
  .error
    {
      border-color:#F00;
  }
  .noterror
  {
      border-color:#FFF;
  }
      
      &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
      &lt;link rel="icon" href="http://getbootstrap.com/favicon.ico"&gt;
  
      &lt;title&gt;Navbar Template for Bootstrap&lt;/title&gt;
    
       
    &lt;link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"&gt;   
    &lt;link href="http://getbootstrap.com/assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet"&gt;    
    &lt;link href="http://getbootstrap.com/examples/navbar-static-top/navbar-static-top.css" rel="stylesheet"&gt;
    &lt;link href="http://getbootstrap.com/examples/navbar/navbar.css" rel="stylesheet"&gt;
    &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.19/themes/start/jquery-ui.css" rel="stylesheet"&gt;
       
   &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;  
    &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.8/jquery.validate.min.js"&gt;&lt;/script&gt;
     &lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;   
    &lt;script src="http://getbootstrap.com/assets/js/ie-emulation-modes-warning.js"&gt;&lt;/script&gt;       
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
    
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
     
        &lt;/head&gt;
  
  
   &lt;body&gt;
  
  
      &lt;div class="container"&gt;
  
        &lt;!-- Static navbar --&gt;
        &lt;nav class="navbar navbar-default navbar-static-top"&gt;
        &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
            &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;a class="navbar-brand" href="#"&gt;Srivatsava Project&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li class="dropdown"&gt;
                &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
                &lt;ul class="dropdown-menu"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                  &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
                  &lt;li class="dropdown-header"&gt;Nav header&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
            &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;li&gt;&lt;a href="http://getbootstrap.com/examples/navbar/"&gt;Default&lt;/a&gt;&lt;/li&gt;
              &lt;li class="active"&gt;&lt;a href="http://getbootstrap.com/examples/navbar-static-top/"&gt;Static top &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="http://getbootstrap.com/examples/navbar-fixed-top/"&gt;Fixed top&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="container"&gt;
  
  
      &lt;div class="jumbotron1"&gt;
          &lt;h1&gt;Login page&lt;/h1&gt;
          &lt;div class="con"&gt;
  
        &lt;form class="form-signin" id="#sign-in"&gt;
          &lt;h2 class="form-signin-heading"&gt;Please sign in&lt;/h2&gt;
          &lt;br/&gt;
          
          &lt;label for="inputEmail" class="sr-only"&gt;Email address&lt;/label&gt;
          &lt;input type="email" id="inputEmail" class="form-control" placeholder="Email" required="" autofocus="" style="height:50px;width:200px;"&gt;
          &lt;br/&gt;
          
          &lt;label for="inputPassword" class="sr-only"&gt;Password&lt;/label&gt;
          &lt;input type="password" id="inputPassword" class="form-control" placeholder="Password" required="" autofocus="" style="height:50px;width:200px;"&gt;
          &lt;br/&gt;
          &lt;br/&gt;
          &lt;div class="checkbox"&gt;
            &lt;label&gt;
              &lt;input type="checkbox" id="check1" value="remember-me" style="float:right"&gt; Remember me
            &lt;/label&gt;
          &lt;/div&gt;
          &lt;button class="btn btn-lg btn-primary btn-block" type="button" id="btn1" style="height:50px;width:200px;"&gt;Sign in&lt;/button&gt;
        &lt;/form&gt;
        &lt;br/&gt;
        &lt;br/&gt;
        &lt;p&gt;Date: &lt;input type="text" id="datepicker"&gt;&lt;/p&gt;
        &lt;br/&gt;
           &lt;br/&gt;
        &lt;a class="btn btn-lg btn-primary" href="http://getbootstrap.com/components/#navbar" role="button"&gt;View navbar docs &amp;raquo;&lt;/a&gt;
      &lt;/div&gt; &lt;!-- /container --&gt;
            
        &lt;/div&gt;
        &lt;!-- Main component for a primary marketing message or call to action --&gt;
       
  
      &lt;/div&gt; &lt;!-- /container --&gt;
  
  
        &lt;!-- Main component for a primary marketing message or call to action --&gt;
        
  
       &lt;!-- /container --&gt;
  
  
      &lt;!-- Bootstrap core JavaScript
      ================================================== --&gt;
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;window.jQuery || document.write('&lt;script src="../../assets/js/vendor/jquery.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
      &lt;script src="http://getbootstrap.com/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;!-- IE10 viewport hack for Surface/desktop Windows 8 bug --&gt;
      &lt;script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>