Como usar um datepicker?

24 respostas
R

eu consegui fazer tudo certinho, mas na hora de colocar o calendario nao está aparecendo o calendario certinho, apenas o campo text normal...

coloquei o código normal do adiciona-contato.jsp

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>    
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="caelum" %>

		<c:import url="cabecalho.jsp" />
		<form action="adicionaContato">
			Digite aqui seus dados para o Cadastro: <br /><br />
			Nome: <input type="text" name="nome" /><br />
			Usuario: <input type="text" name="usuario" /><br />
			Senha: <input type="text" name="senha" /><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" />

criei o arquivo certinho do campoData.tag

<%@ attribute name="id" required="true" %>
<script type="text/javascript">
	$(function() {
	$("#${id}").datepicker({dateFormat: "dd/mm/yy"});
	});
</script>
<input type="text" id="${id}" name="${id}" />
no cabeallho.jsp to importando:
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>BD</title>
		<link type="text/css" href="css/jquery.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/jquery-ui.js"></script>
		
	</head>
	<body>
		<img src="css/ui-lightness/images/ui-bg_gloss-wave_35_f6a828_500x100.png" />
		
		<h2>Agenda de Contatos do Projeto</h2>
	<hr />

	</body>
</html>

o capoData.tag ta dentro de /WEB-INF/tags

pra mim eu fiz tudo normal, alguem ta vendo algum erro?

24 Respostas

R

alguem aí?

E

já testou sem o dateFormat no datepicker?

R

tentei também sem o dateFormat e nada... meu código da tag é a seguinte agora..:

<%@ attribute name="id" required="true" %>
<script type="text/javascript">
	$(function() {
	$("#${id}").datepicker();
	});
</script>
<input type="text" id="${id}" name="${id}" />
R

ahhh pessoal, tava relendo aqui... na apostila tava falando o seguinte

3) Agora, vamos criar a nossa tag para o calendário. a) Dentro de WEB-INF crie um diretório chamado tags. b) Agora crie um arquivo chamado campoData.tag com o seguinte conteúdo:
<%@ attribute name="id" required="true" %>
      <script type="text/javascript">
          $(function() {
                $("#${id}").datepicker({dateFormat: 'dd/mm/yy'});
          });
      </script>
      <input type="text" id="${id}" name="${id}" />
c) Para utilizá-la, vamos voltar para o adiciona-contato.jsp e junto à declaração da Taglib core, vamos importar nossa nova tag:
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
      <%@taglib tagdir="/WEB-INF/tags" prefix="caelum" %>
d) Agora, basta trocarmos o input da data de nascimento pela nossa nova tag:
<form action="adicionaContato">
          Nome: <input type="text" name="nome" /><br />
	  Usuario: <input type="text" name="usuario" /><br />
	  Senha: <input type="text" name="senha" /><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>

E BEM NA PARTE DO DATEFORMAT.. ta escrito {dateFormat: 'dd/mm/yy'} com aspas simples... eu ja tentei tirar o dateFormat, ja tentei colocar com aspas simples, aspas duplas.. e nada, o calendario do datepicker nao aparece de jeito nenhum... seria algum problema referente à essa aspas simples ou algo do tipo? Seria o problema de ter criado uma tag para isso? alguem sabe como pelo menos eu poderia fazer alguma gambiarra pra tirar o tag e deixar normal? Alguém tem algum outra idéia? procurei em um monte de lugar.. pesquisei mta coisa e não consigo entender o porquê desse calendario nao querer aparecer...

Agradeço à todos que visitaram e tentaram ajudar desde já...

R

confere essa parte:
vc fez o download do jquery.js, jquery-ui.js e jquery.css?(os nomes podem ter diferença tipo : jquery-1.1.8.js ) nesse caso tem q por o nome igual la no head pra ele axar.
colocou nos diretorios js e css do projeto ?

<link type="text/css" href="css/jquery.css" rel="stylesheet" />  
        <script type="text/javascript" src="js/jquery.js"></script>  
        <script type="text/javascript" src="js/jquery-ui.js"></script>
G

Aqui está dando problema com o “value”:

<caelum:campoData id="dtInclusao" value="${imovel.dtInclusao}" />

O erro é:

Invalid attribute (value).

campoData.tag:

<%@tag description="calendario" pageEncoding="UTF-8"%>  

<%@ attribute name="id" required="true" %>
<%@attribute name="value" required="true" %>  


<script type="text/javascript">
    $(function() {
        $("#${id}").datepicker({dateFormat: 'dd/mm/yy'});   
        $("#${value}").datepicker({dateFormat: 'dd/mm/yy'});       
    });
</script>
<input type="text" id="${id}" value="${value}" name="${id}" />

Alguém consegue visualizar o problema?
Abraço!

R

qual o nome do seu taglib e o prefixo dele é caelun?

no meu caso a taglib esta no diretorio web inf /tags

<%@taglib tagdir="/WEB-INF/tags" prefix="caelun" %>

qnd criou a taglib salvou com o nome campoData?

<caelum:campoData id="dtInclusao" value="${imovel.dtInclusao}" />
G

Isso, está certo, segui a dica da apostila na página 83 da FJ-21.
O arquivo possui o nome campoData.tag e está em WEB-INF/tags.

R

vc quer exibir uma data exitente em algum lugar ou cadastrar uma data?

c for cadastrar

<caelum:campoData id="dtInclusao" value="" />

ps c nao funcionar posta jsp onde chama a taglib junto com cabeçalho

G

Acho que o problema pode estar no campoData.tag mesmo:

<input type="text" id="${id}" name="${id}" value="${value}" />

É esse o padrão mesmo? a ID é id, o NAME é id e VALUE é value?
Testei sem o name e value e o datepicker não aparece. Os imports estão no próprio form:

<script type="text/javascript" src="${pageContext.request.contextPath}/javascript/jqueryui/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/javascript/jqueryui/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/smoothness/jquery-ui-1.8.4.custom.css">
H

cara no caminho faltou o da tag quando você coloca na diretiva não esta faltando o nome da tag???

R

tenta assim poe no cabeçalho da pagina

arruma os caminhos relativos para encontrar os arquivos dentro do Webcontent/css , Webcontent/js

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>E-comerce</title>
        <link type="text/css" href="css/ui-lightness/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
    </head>
    <body>

alguem consseguiu fazer?

H
<%@taglib tagdir="/WEB-INF/tags/nome da tag" prefix="caelun" %>

vc esqueceu o nome da tag no caso essa diretiva tenque ser colocado na pagina onde você vai usar o form por isso será executado no servidor quando você usa o import do core ele ti retorna o html do cabeçalho então as diretivas não foram importadas.

Abraços

G

É prefix=“caelun”?? ou prefix=“caelum” ???
Eu coloquei isso no cabeçalho, não esqueci de nada, mas não funciona. Alguém sabe informar como fica aquela linha?

<input type="text" id="${id}" name="${id}" value="value" />

É isso?
Abraço!!

H

cara escrevi errado então você tenque colocar o impot da tag não no cabeçalho e sim na pagina principal abraços!!!

S

Gostaria de saber do Rafael se ele já encontrou a solução. E se encontrou qual foi a mesma.

R

Essa forma foi a que eu encontrei para resolver os problemas referenciais

<html> <head> <c:url value="/css/ui-lightness/jquery-ui-1.8.6.custom.css" var="jquerycss"></c:url> <c:url value="/js/jquery-1.4.2.min.js" var="jqueryjs"></c:url> <c:url value="/js/jquery-ui-1.8.6.custom.min.js" var="jqueryuijs"></c:url> <link type="text/css" href="${jquerycss}" rel="stylesheet" /> <script type="text/javascript" src="${jqueryjs}"></script> <script type="text/javascript" src="${jqueryuijs}"></script> </head>

A

Galera eu fiz o seguinte pra parada rodar blz...

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

coloca na tag do cabecalho.jsp e vcs vão conseguir

R

Galera,

a dica do allan funciona … testei usando o comando $( “#${id}” ).datepicker(); dentro do arquivo .tag

H

Pessoal,

Estava tendo o mesmo problema, e para resolver, fiz o seguinte:

Dentro do arquivo cabecalho.jsp, a apostila da Caelum pede para fazer desse jeito:

Após pesquisar sobre isso, percebi que devemos especificar onde é a localização exata de cada arquivo desse.

Dessa maneira, o meu código ficou assim e funcionou perfeitamente:

Boa sorte! :slight_smile:

A

Mesmo que eu faça essas mudanças o erro não é resolvido. No console de erro do firefox mostra o seguinte erro: “$ is not defined”, apontando para o campo onde esta a tag. Alguem conseguiu resolver esse erro, de outra maneira, alem do hcorrea?

D

Galera, apenas verifiquem a cache do navegador!

O que esta na apostila esta correto.

Um abraço!

J
Pessoal, meu problema estava no JSP populado que mostra os dados para atualização. O JQuery do campo estava funcionando, mas na hora que eu escolhia uma nova data ele a exibia o valor com o ano repetido. Exemplo: Data antiga: 03/02/1979 Data após obter com o datepicker: 27/02/19791979 Resolvi criando um arquivo de scripts em js/data.js e fazendo referência do mesmo na minha página, pois tive muitos problemas com a seguinte Tag personalizada:
<%@ attribute name="id" required="true" %>
<%@ attribute name="value" required="true" %>
<script type="text/javascript">
	$(function(){
		$("#${id}").datepicker({dateFormat: 'dd/mm/yy', "changeYear": true, "changeMonth": true });
		$("#${value}").datepicker({dateFormat: 'dd/mm/yy'});
	});	
</script>
<input type="text" id="${id}" name="${id}" value="${value}"/>
Meu arquivo de scripts js/data.js ficou assim...
$(document).ready(function(){
	$("#dataNascimento").datepicker({dateFormat: 'dd/mm/yy',"changeYear": true, "changeMonth": true });
});
Meu código JSP referenciando o script anterior ficou assim:
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<link type="text/css" href="css/jquery.css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery-ui.js"></script>
	<script type="text/javascript" src="js/data.js"></script>
</head>
<body>
	<c:import url="cabecalho.jsp"></c:import>
	Formulário para alteração de contatos:<br />
	<form action="mvc" method="post">
		Id:			<input type="text" name="id" readonly="readonly" value="${contato.id}" /><br />
		Nome:		<input type="text" name="nome" value="${contato.nome}"/> <br />
		E-mail:		<input type="text" name="email" value="${contato.email}"/> <br />
		Endereço:	<input type="text" name="endereco" value="${contato.endereco}"/> <br />
		Data de Nascimento: <input type="text" id="dataNascimento" name="dataNascimento" value="<fmt:formatDate value="${contato.dataNascimento.time}" pattern="dd/MM/yyyy"/>"/>	  
		<input type="hidden" name="logica" value="AlteraContatoLogic" />
		<input type="submit" value="Enviar"/>		
	</form>
	<c:import url="rodape.jsp"></c:import>
</body>
</html>
Abraços, Espero ter ajudado.
B

Meu irmao tente colocar os estilos CSS e os Javascripts:

no adiciona-contato.jsp e nao no cabecalho. Depois veja a versao dos mesmos se estao compativeis com os que vc baixou nas pastas css e js no WebContent do Eclipse, verifique o caminho onde estes arquivos estao.

Em Cristo,

Alberto

Criado 4 de agosto de 2010
Ultima resposta 24 de jun. de 2012
Respostas 24
Participantes 14