Estou dando uma estudada na apostila “Caelum Java Web - FJ21” e estou tendo um pouco de dificuldade na parte relacionada a criação das minhas taglibs, pois estou seguindo o exemplo dado no livro para utilizar um componente do jquery (DatePicker) para exibir um calendário nas páginas jsp, porem não está funcionando. Gostaria se possível da ajuda dos amigos, para entender o que poderia estar errado no meu código.
Página JSP
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix='c' %>
<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix='d'%>
<%@taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@taglib tagdir="/WEB-INF/tags" prefix="caelum" %>
<c:import url="Cabecalho.jsp" />
<jsp:useBean id="dao" class="br.com.caelum.dao.ContatoDao"/>
<jsp:useBean id="contato" class="br.com.caelum.model.Contato"/>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="css/jquery-ui.css" rel="stylesheet">
<link href="css/jquery-ui.min.css" rel="stylesheet">
<link href="css/jquery-ui.structure.css" rel="stylesheet">
<link href="css/jquery-ui.structure.min.css" rel="stylesheet">
<link href="css/jquery-ui.theme.css" rel="stylesheet">
<link href="css/jquery-ui.theme.min.css" rel="stylesheet">
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
</head>
<body>
<form action="adicionaContato">
Nome: <input type="text" name="nome" /><br />
E-mail: <input type="text" name="email" /><br />
Endereço: <input type="text" name="endereco" /><br />
Data Nascimento: <caelum:campodata id="dataNascimento" /> <br />
<input type="submit" value="Gravar"/>
</form>
<c:import url="Rodape.jsp" />
</body>
Conteúdo da minha taglib chamada “campodata.tag”
<%@ attribute name="id" required="true" %>
<input id="${id}" name="${id}" type="text" />
<script>
$("#${id}").datePicker({dateFormat: 'dd/mm/yy'});
</script>
E esse é o desenho da minha estrutura, coloquei só para saber mesmo se pode ter alguma pasta sendo colocada em local errado.
Quando eu executo a página “adicionaContato.jsp” ele exibe normalmente todos os campos, porem o calendário que deveria estar aparecendo o “DatePicker”, na verdade aparece como campo de texto normal.
Desde já agradeço por qualquer ajuda.