JQuery Datepicker

5 respostas
D

Galera, boa noite!

Estou fazendo o estudo da FJ21, e estou na parte que manipula taglib, no caso, a JQUERY:DATEPICKER !!

Enfim, fiz os procedimentos pedidos pela apostila

1) Baixei o jar do link: http://jqueryui.com/download

2) Dentro deste ZIP tinha as pastas JS e CSS, joguei-as dentro do /WebContent

3) Criei minha taglib

<%@ attribute name="id" required="true" %>
<input type="text" id="${id}" name="${id}" />
<script type="text/javascript">
$("#${id}").datepicker({dateFormat: ?dd/mm/yy?});
</script>

4) Utilizei na pagina:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="xxx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<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>	
<c:import url="cabecalho.jsp" />
<form action="adicionaContato" method="POST">
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: <xxx:campoData id="dataNascimento" /><br />
<input type="submit" value="Gravar" />
</form>
<c:import url="rodape.jsp" />
</body>
</html>

Mas não da erro algum, nem surti efeito.. Preicso configurar algo a mais?/ Preicso improtar algum JAR? NA FJ21 nao diz nada..

testei no Chrome e no IE8, nenhum aparece o calendar....

Desculpe criar outro tópico, mas nenhuma aberto me ajudou :(

Vlw!

5 Respostas

A

Eu geralmente coloco um styleId dentro da tag que carrega o calendário. Tipo…o mesmo valor do property eu costumo utilizar no styleId. No caso do exemplo abaixo usando Struts.
Ex:

<html:text property="iniDate" styleId="iniDate" maxlength="10" size="12" readonly="true" />

Aqui a function do Calendar:

Tenta fazer desse jeito e depois avisa se funcionou. lembrando que estou usando Struts.

M

Não sei se estou correto mas acho que você copiou e colou o conteudo da apostila no seu código.
Por exemplo, quando eu baixo o jquery, o nome do jquery-api e jquery-ui não vem como você colocou

<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>

va na pasta css e js e veja o nome completo dos js e css e coloque nas respectivas tags acima o nome completo(path+file name) da mesma forma que esta na arvore de diretorios que voce baixou.

espero ter ajudado

D

Colegas GUJ, obrigado pelas dicas.

Assim que chegar em casa irei testar estas sugestões.

De fato eu copiei da apostila, nao me atentei a esse detalhe… E como não ocorre erro algum, fiquei perdido (Estou começando agora a estudar WEB)

Artur, a function fica na parte da minha TAG ou em meu HTML ?? Vou fazer testes depois tambem, a propria apostila sugere fazer modificações!

Assim que obtiver novidades posto aqui!

Obrigado!

D

Aproveitando o tópico!

Estes arquivos sempre devem ser adicionados nestas pastsa?

/js

/css

??

Não precias de driver, nem de nada?

Estou acostumado com SWING que tudo é configurado no classpath, e na web é diferente!!!

U

aproveitando esse tópico e que meu problema tbm é com datepicker e apostila fj21 só q o meu é no desafio 11.16

o meu problema esta na formatação da data quando eu seleciono o link alterar a tarefa ele coloca no campo input a data da finalização a data deveria esta no formato dd/mm/yy mas aparece algo tipo [color=red]Tue May 01 00:00:00 GMT-03:00 2012[/color]

mas quando clico ne uma data do calendário do jquery ele respeita a formatação e a nova data aparece na formatação dd/mm/yy

andei procurando bastante na net e ate encontrei uma pessoa com o mesmo problema q eu mas nenhuma solução

se alguém puder me ajudar ae

campoData.tag

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

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

mostra.jsp

<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib tagdir="/WEB-INF/tags" prefix="caelum"%>
<html>
<head>


<link type="text/css"
	href="resources/css/ui-lightness/jquery-ui-1.7.3.custom.css"
	rel="stylesheet" />
<script type="text/javascript" src="resources/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
	src="resources/js/jquery-ui-1.7.3.custom.min.js"></script>

</head>
<body>
	<h3>Alterar tarefa - ${tarefa.id}</h3>
	<form action="alteraTarefa" method="post">
		<input type="hidden" name="id" value="${tarefa.id}" /> Descrição:<br />
		<textarea name="descricao" cols="100" rows="5">${tarefa.descricao}</textarea>
		<br /> Finalizado? <input type="checkbox" name="finalizado"value="true" ${tarefa.finalizado?'checked':''} /> <br />                         
               
                Data  de finalização: <br />
		<caelum:campoData value="${tarefa.dataFinalizacao.time}" id="dataFinalizacao" />

		<br /> <input type="submit" value="Alterar" />
	</form>
</body>
</html>
Criado 17 de janeiro de 2012
Ultima resposta 18 de mai. de 2012
Respostas 5
Participantes 4