Well, I have a problem with the materialize datepicker, I did a side nav and wanted to put a form to choose a date. I did this, but when I click on this form, it opens all buggy.
Mycode:
<!DOCTYPE html>
<html>
<head>
<!-- Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Compiled and minified CSS -->
<link type="text/css" rel="stylesheet" href="../public/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="../public/css/style.css" />
<link type="text/css" rel="stylesheet" href="../public/css/font-awesome.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script><!--CompiledandminifiedJavaScript--><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body id="layout">
<header>
<div class="navbar-fixed">
<nav class="indigo darken-4 top-nav">
<div class="nav-wrapper">
<a href="#" class="brand-logo">      
<img src="../public/images/logo.png">
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
</ul>
</div>
</div>
</nav>
</header>
<!-- layout -->
<div class="wrapper">
<div class="row">
<ul class="side-nav fixed hoverable indigo">
<li class="indigo darken-1 z-depth-2">
<div class="row">
<br /><br>
<div class="col s4 m4 l4">
<img src="../public/images/989.jpg" alt="" class="circle responsive-img">
</div>
<center>
<div class="col s12 m8 l8">
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#"><i class="material-icons indigo-text text-darken-4">face</i> Perfil</a>
</li>
<li><a href="#"><i class="material-icons indigo-text text-darken-4">keyboard_tab</i> Sair</a>
</li>
</ul>
<!-- Dropdown Trigger -->
<a class='dropdown-button btn indigo darken-3 col s12' href='#' data-activates='dropdown1'>         Rafael<i class="material-icons right">arrow_drop_down</i></a>
<p class="white-text">Professor</p>
</div>
</center>
</div>
<div class="col s12">
<form>
<center>
<h4 class="white-text">Nova Prova</h4>
</center>
<input type="text" class="datepicker small">
</form>
</div>
</body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="../js/materialize.min.js"></script>
<script type="text/javascript" src="../js/app.js"></script>
<!-- efeito do botão -->
<script>
$('.fixed-action-btn').openFAB();
$('.fixed-action-btn').closeFAB();
$('.fixed-action-btn.toolbar').openToolbar();
$('.fixed-action-btn.toolbar').closeToolbar();
</script>
<!-- fim efeito botão -->
<script>
$('.dropdown-button').dropdown('open');
$('.dropdown-button').dropdown('close');
</script>
<!-- select -->
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
<!-- fim do select -->
<!-- data -->
<script>
$('.datepicker').pickadate({
monthsFull: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
monthsShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
weekdaysFull: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sabádo'],
weekdaysShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sab'],
today: 'Hoje',
clear: 'Limpar',
close: 'Pronto',
labelMonthNext: 'Próximo mês',
labelMonthPrev: 'Mês anterior',
labelMonthSelect: 'Selecione um mês',
labelYearSelect: 'Selecione um ano',
selectMonths: true,
selectYears: 15
});
</script>
<!-- fim data-->
</html>