gpt4 book ai didi

jquery - 未捕获的 TypeError : $(. ..).pickadate 不是函数

转载 作者:行者123 更新时间:2023-12-01 03:59:27 25 4
gpt4 key购买 nike

我目前正在开发一个简单的网络项目。我有一个页面,有一个简单的表单,其中输入了他的名字、生日和大学学位。我正在使用 Materialise 和 jquery。但这是一场噩梦,因为我无法正确确定这两个人的日期(生日)。我总是收到此错误:

未捕获的类型错误:$(...).pickadate 不是函数

这是我的 html :

$(function() {

$(document).ready(function() {
$('.datepicker').pickadate({
selectMonths: true,
selectYears: 20
});
$('select').material_select();
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8" />
<link type="text/css" rel="stylesheet" href="/materialize/css/materialize.min.css" media="screen,projection" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<title>EscolAlura</title>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/materialize/js/inicializar.js"></script>



</head>

<body class="grey lighten-3">
<div id="formularioEdicao" class="container">
<h3 class="main-title center">Cadastrar Aluno</h3>
<div class="row">
<form class="col s12" action="#" th:action="@{/aluno/salvar}" th:object="${aluno}" method="post">
<div class="section">
<h5>Dados Básicos</h5>
<div class="row">
<div class="input-field col s12">
<input id="nome" type="text" th:field="*{nome}" />
<label for="nome">Nome</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="dataNascimento" type="date" class="datepicker" th:field="*{dataNascimento}" />
<label for="dataNascimento">Dt. Nascimento</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="curso" type="text" class="validate" th:field="*{curso.nome}" />
<label for="curso">Curso</label>
</div>
</div>

</div>
<!-- Fim SECTION Dados Basicos -->

<div class="row">
<div class="input-field col s12 center">
<button class="btn waves-effect waves-light" type="submit" name="action">Salvar Aluno</button>
</div>
</div>
</form>
</div>

</div>
<!-- Fim do formulario de edicao -->
<script type="text/javascript" src="/materialize/js/materialize.js"></script>
</body>

</html>

My page in chrome

有人知道如何解决这个问题吗?谢谢

最佳答案

加载脚本的顺序非常重要。

使用 jQuery 时,从它开始,在所有之前加载它。然后使用其他插件,然后使用您的自定义 JS 文件。

见下文

$(document).ready(function() {

$('.datepicker').pickadate({
selectMonths: true,
selectYears: 20
});

$('select').material_select();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" />

<div id="formularioEdicao" class="container">
<h3 class="main-title center">Cadastrar Aluno</h3>
<div class="row">
<form class="col s12" action="#" th:action="@{/aluno/salvar}" th:object="${aluno}" method="post">
<div class="section">
<h5>Dados Básicos</h5>
<div class="row">
<div class="input-field col s12">
<input id="nome" type="text" th:field="*{nome}" />
<label for="nome">Nome</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="dataNascimento" type="date" class="datepicker" th:field="*{dataNascimento}"/>
<label for="dataNascimento">Dt. Nascimento</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="curso" type="text" class="validate" th:field="*{curso.nome}" />
<label for="curso">Curso</label>
</div>
</div>

</div> <!-- Fim SECTION Dados Basicos -->

<div class="row">
<div class="input-field col s12 center">
<button class="btn waves-effect waves-light" type="submit" name="action">Salvar Aluno</button>
</div>
</div>
</form>
</div>

</div>

关于jquery - 未捕获的 TypeError : $(. ..).pickadate 不是函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52044508/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com