title: Uncaught TypeError: $(...).pickadate is not a function
body: <p>i'm currently developing a simple web project. I have a page who has a simple form where the person put his name, his birthday,and his univerisity degree. I'm using materialize and jquery. But it has been a nightmare, because i can't get the date (birthday) properly with these two. I always get this error :</p>
  
  <p><code>Uncaught TypeError: $(...).pickadate is not a function</code></p>
  
  <p>Here is my html :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
  
    $(document).ready(function() {
      $('.datepicker').pickadate({
        selectMonths: true,
        selectYears: 20
      });
      $('select').material_select();
    });
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns:th="http://www.thymeleaf.org"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link type="text/css" rel="stylesheet" href="/materialize/css/materialize.min.css" media="screen,projection" /&gt;
    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /&gt;
    &lt;title&gt;EscolAlura&lt;/title&gt;
    &lt;script src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="/materialize/js/inicializar.js"&gt;&lt;/script&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body class="grey lighten-3"&gt;
    &lt;div id="formularioEdicao" class="container"&gt;
      &lt;h3 class="main-title center"&gt;Cadastrar Aluno&lt;/h3&gt;
      &lt;div class="row"&gt;
        &lt;form class="col s12" action="#" th:action="@{/aluno/salvar}" th:object="${aluno}" method="post"&gt;
          &lt;div class="section"&gt;
            &lt;h5&gt;Dados Básicos&lt;/h5&gt;
            &lt;div class="row"&gt;
              &lt;div class="input-field col s12"&gt;
                &lt;input id="nome" type="text" th:field="*{nome}" /&gt;
                &lt;label for="nome"&gt;Nome&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="input-field col s12"&gt;
                &lt;input id="dataNascimento" type="date" class="datepicker" th:field="*{dataNascimento}" /&gt;
                &lt;label for="dataNascimento"&gt;Dt. Nascimento&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="row"&gt;
              &lt;div class="input-field col s12"&gt;
                &lt;input id="curso" type="text" class="validate" th:field="*{curso.nome}" /&gt;
                &lt;label for="curso"&gt;Curso&lt;/label&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;!-- Fim SECTION Dados Basicos --&gt;
  
          &lt;div class="row"&gt;
            &lt;div class="input-field col s12 center"&gt;
              &lt;button class="btn waves-effect waves-light" type="submit" name="action"&gt;Salvar Aluno&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
    &lt;!-- Fim do formulario de edicao --&gt;
    &lt;script type="text/javascript" src="/materialize/js/materialize.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/zFWyU.png" rel="nofollow noreferrer">My page in chrome</a></p>
  
  <p>Anyone knows how to solve this problem ? Thx</p>