Componente Calendar do Primefaces - Dúvida Máscara

Front-end
#1

Olá, bom dia.

Tenho um componente calendar do primefaces, e gostaria que quando eu começasse a digitar a data, sem selecionar pelo próprio componente, colocasse as barras “” de forma automática.
Alguém sabe se é uma propriedade que permite isso, ou se da pra fazer utilizando jQuery ?
Segue o exemplo do meu componente:

<p:calendar id="digdat" value="#{mbMovDig.digDat}" 
  showOn="button" effect="fadeIn" pattern="dd/MM/yyyy"
  required="true" requiredMessage="A Data deve ser preenchida." />
#2

Você consegue fazer isso através de um inputMask http://www.primefaces.org/showcase-labs/ui/inputMask.jsf :smiley:

#3

mas será que no próprio campo de texto do <p:calendar /> não da pra fazer ?

#4

para voce fazer isso tera que criar uma função javascript e usar no evento

onkeypress" ou usar Jquery

#5

to tentando fazer assim com jQuery, mas não ta dando =/

$('#data').live('keypress', function() {
		alert('Clique');
});

conflitos no primefaces x jquery, será ?

#6

Gostaria de compartilhar uma solução possível para o richfaces:

&lt;rich:calendar id="textDataInicial" cellWidth="24px" cellHeight="22px" value="#{chamadoManagedBean.chamado.dataInicial}" datePattern="#{msg.date_pattern}" todayControlMode="hidden" optionalFooter="hidden" style="width:73px;" styleClass="richCalendar" inputClass="richCalendar textDataInicial" label="#{msg.global_data_inicial}" enableManualInput="true"&gt; &lt;/rich:calendar&gt; &lt;rich:jQuery id="mskTextDataInicial" selector=".textDataInicial" timing="onload" query="mask('99/99/9999',{placeholder:' '})"&gt;&lt;/rich:jQuery&gt;

Aí é só adaptar com os componentes do primefaces e boa! :slight_smile:
Testei aqui e está ok.
Qualquer dúvida fiquem à vontade para perguntar.

#7

Amigo esta mensagem é antiga e a solução seria para Primefaces e não RichFaces

#8

Hoje tb precisei adicionar a máscara de data para o componente calendar do primefaces. Estou utilizando a versão 3.4.1 e não encontrei nenhuma forma pelo próprio componente para solucionar a questão.

A solução que encontrei segue abaixo:

  1. O id do meu p:calendar deixei popupButtonCal.

  2. Importante: Se olhar o fonte(html) gerado pelo componente o campo input será gerado com o id+_input (Ex.: popupButtonCal_input).

  3. Adicionar o javascript em sua página:

&lt;script type="text/javascript"&gt;
	jQuery(function($){
	   $("#popupButtonCal_input").mask("99/99/9999",{placeholder:" "});
	});
&lt;/script&gt;

Pronto, a máscara está no componente calendar!

#9

Boa tarde, tentei seguir sua dica, mas não funcionou, se importa de detalhar um pouco mais?

#10

Tente assim:

        &lt;script type="text/javascript"&gt;  
        jQuery(function($){
        	$("#frm\\:dtIni_input").mask("99/99/9999",{placeholder:"_"});
        }); 
        &lt;/script&gt;
#11