rich:calendar + jQuery

[Miqueloni]

Alguém sabe como faço para utilizar máscara no <rich:calendar> com
jQuery?

Obrigado!!

[Wagner Santos]

Miqueloni,
Como assim mascara no rich:calendar, eu achava que ele nao permite a utilizacao de mascaras ou melhor de entrada de dados, mas vi que permite...
Use o jquery maskedinput e dentro do seu calendar coloque <rich:jQuery query="mask('99/99/9999')" timing="onload" />

Não fiz o teste, mas eh assim que uso em outro componente, deve funcionar no seu caso. E não deixe de colocar (acho que vc já fez isso, mas deixe eu avisar o incautos como eu) o enableManualInput do rich:calendar.

Me corrigindo, fiz o teste, mas acho que dá algum confito com alguma coisa, pois nao consegui fazer funcionar, entao, reitero a dúvida... alguem sabe como fazer isso funcionar?

Obs.: Teste aí, pode ser que vc consiga fazer funcionar

Wagner Santos
MSN/Gtalk: wagner....@gmail.com
Skype: wagner.gsantos
Twitter: http://twitter.com/wagnergsantos
Site: http://www.geracaoelias.blog.br

2008/11/6 Miqueloni <ramiq...@gmail.com>

[Tiago Augusto Nogueira Coelho]

O problema de usar isso dentro do calendar é que não funciona. Já fiz alguns teste mas não consegui também. Então neste caso fiz um mascara JS eu mesmo. Mas com muito menos recuros que o MarkInput.

Se conseguierem usar favor postar

[Ricardo Miqueloni]

Colega, já fiz um milhão de teste, inclusive o que você indicou e nada. Também cansei de procurar na net e nada. Acho que esse recurso de máscara do jQuery ainda não funciona no rich:calendar. Testei em uma caixa de texto simples e funciona, parece que o problema é só para tags de calendário como no <rich:calendar>. Agora estou testando com o <t:inputCalendar> mas não sei se vai funcionar. Se eu achar uma resposta eu posto aqui. A busca continua..........  :-((

 

2008/11/7 Wagner Santos <wagner....@gmail.com>

[Felix Coutinho]

rapaz aqui rola tranquilho.
Assim:

no topo:

<a4j:loadScript src="resource://jquery.js"/>

Na meio....

<rich:calendar id="dataFinal" value="#{formUsuario.bean.fim}"
datePattern="dd/MM/yyyy" inputSize="10"
enableManualInput="true" rendered="#{formUsuario.disableState}"
required="true" requiredMessage="Campo Data Final é
obrigatório.">

Daih no final da página...

<script src="/shared/js/jquery.mask.js" type="text/javascript">x</script>
<script>
jQuery( function($) {
$j("#form\\:dataInicialInputDate").mask("99/99/9999");
});
</script>

Ou seja, além de habilitar o manual input, precisa por a mascara no campo.
Lembrando que precisa desse plugin mask do jquery.


2008/11/7 Ricardo Miqueloni <ramiq...@gmail.com>:

--
Felix Coutinho

[Tiago Augusto Nogueira Coelho]

Eu também fiz como você. testei testei e nada.. até modificando o id para algo interno que ele cria mas nada

[Tiago Augusto Nogueira Coelho]

Esse códido seu tem alguma coisa diferente. Primeito que o id do seu calendar esta diferente do que vc usa no jQuery. E vc esta usando o jQuery "na mão" e nao a tag do richfaces né

[Felix Coutinho]

id estah diferente por que ele muda quando processa a visao pra mandar
pro browser.
E nao lembro de ter testado com o nativo, talvez seja a versao do
jquery nativo do richfaces que nao suporte, alguma coisa do tipo.
Mas desse jeito que fiz funciona.

abraços

2008/11/7 Tiago Augusto Nogueira Coelho <tiagoa...@gmail.com>:

> Esse códido seu tem alguma coisa diferente. Primeito que o id do seu
> calendar esta diferente do que vc usa no jQuery. E vc esta usando o jQuery
> "na mão" e nao a tag do richfaces né
>
>
> >
>

--
Felix Coutinho

[Ricardo Miqueloni]

Colegas, conseguiiiiiiiii. :-)

Segui a idéia do nosso colega Felix Coutinho. Não precisa do jquery.js porque o Richfaces já tem o dele, basta acrescentar o maskedinput. Ficou assim:

 

<

ui:define name="javascript">

<script type="text/javascript" src="/gci/js/jquery.maskedinput-1.1.4.js" ></script>

<script>

jQuery(

function($){

$(

"#form1\\:refiniInputDate").mask("99/9999"); //maskedinput

});

</script>

</ui:define>

<ui:define name="tituloPagina"></ui:define>

<ui:define name="corpo">

<h:form id="form1" >

<rich:panel header="DEMONSTRATIVO TOTAL DAS PRESTAÇÕES DE SAÍDA ACOBERTADAS POR NFST, EMITIDAS EM VIA ÚNICA, POR GRUPO DE DESTINATÁRIO" style="width: 600px;">

<h:panelGrid columns="2">

<h:outputText value="Operadora:" />

<h:selectOneMenu id="inscricao" value="#{nivel1.inscricao}" >

<f:selectItems value="#{nivel1.listaOperadoras}" />

</h:selectOneMenu>

<h:outputText value="Referência inicial (MM/AAAA):" />

<rich:calendar value="#{nivel1.refini}" id="refini" datePattern="MM/yyyy" styleClass="TextField" popup="true" inputSize="7" enableManualInput="true" />

<h:outputText value="Referência final (MM/AAAA):" />

<rich:calendar value="#{nivel1.reffim}" id="reffim" datePattern="MM/yyyy" styleClass="TextField" popup="true" inputSize="7" enableManualInput="true" />

</h:panelGrid>

<rich:spacer height="30" />

<t:htmlTag value="center">

<h:commandButton type="submit" value="Pesquisar" action="#{nivel1.listar}" />

</t:htmlTag>

</rich:panel>

</h:form>

</ui:define>

[Manuel Ferreira Colchete Neto]

Pessoal,

existe uma forma que eu achei mais simples.

O jQuery faz referência a elementos html no estilo css, ou seju, usando # (para fazer referência pelo id) ou . (para fazer referência pela classe de estilo). Assim pode-se fazer:

<!-- Carrega o script -->

<a4j:loadScript src="../js/jquery.maskedinput.js" />

 

<!-- Define a máscara aplicada pelo id -->

<rich:jQuery id="mskData" selector="#data1InputDate" timing="onload"

         query="mask('99/99/9999',{placeholder:' '})" />

 

<rich:calendar id="data1" popup="true" datePattern="dd/MM/yyyy"

                inputClass="rich-textarea"

                inputSize="7" enableManualInput="true"

                value="#{meuBean.data1}" />

               

Nessa primeira forma deve-se definir uma máscara para cada componente.

               

 

<!-- Define a máscara genérica aplicada pela classe de estilo -->

<rich:jQuery id="mskData" selector=".txtData" timing="onload"

         query="mask('99/99/9999',{placeholder:' '})" />

 

<rich:calendar id="data2" popup="true" datePattern="dd/MM/yyyy"

                inputClass="rich-textarea txtData"

                inputSize="7" enableManualInput="true"

                value="#{meuBean.data2}" />

 

<rich:calendar id="data3" popup="true" datePattern="dd/MM/yyyy"

                inputClass="rich-textarea txtData"

                inputSize="7" enableManualInput="true"

                value="#{meuBean.data3}" />

No segundo exemplo, com apenas uma declaração de máscara, é possível definir vários componentes.


Espero que ajude.

Abraço.

2008/11/7 Ricardo Miqueloni <ramiq...@gmail.com>

--
Manuel Ferreira Colchete Neto