Problem with rich:calendar and jQuery maskedinput plugin
gothicoil May 6, 2011 10:26 AMHi people, I´m having some problem with rich:calendar and maskedInput jquery plugin.
I have some rich:calendar
[code]
<rich:calendar id="dtPeriodoApuracaoInicial"
value="#{gestaoPoloExtratoResumidoMB.dataPeriodoApuracaoInicial}"
disabled="#{gestaoPoloExtratoResumidoMB.desabilitarPeriodoApuracao}"
required="#{gestaoPoloExtratoResumidoMB.periodoApuracaoObrigatorio}"
title="${b['comum.periodoApuracaoInicial']}"
label="${b['comum.periodoApuracaoInicial']}"
direction="bottom-right"
datePattern="dd/MM/yyyy"
maxlength="10"
buttonIcon="/static/images/calendar.gif"
enableManualInput="true"
inputStyle="width:65px; color:#003F7B;"
inputClass="maskDate"
oninputfocus="maskDateInput();">
<f:convertDateTime type="date" pattern="dd/MM/yyyy"/>
</rich:calendar>
<rich:spacer width="5px"/>
<h:outputText value="${b['comum.a']}" styleClass="label" />
<rich:spacer width="5px"/>
<rich:calendar id="dtPeriodoApuracaoFinal"
value="#{gestaoPoloExtratoResumidoMB.dataPeriodoApuracaoFinal}"
disabled="#{gestaoPoloExtratoResumidoMB.desabilitarPeriodoApuracao}"
required="#{gestaoPoloExtratoResumidoMB.periodoApuracaoObrigatorio}"
title="${b['comum.periodoApuracaoFinal']}"
label="${b['comum.periodoApuracaoFinal']}"
direction="bottom-left"
datePattern="dd/MM/yyyy"
maxlength="10"
buttonIcon="/static/images/calendar.gif"
enableManualInput="true"
inputStyle="width:65px; color:#003F7B;"
inputClass="maskDate"
oninputfocus="maskDateInput();">
<f:convertDateTime type="date" pattern="dd/MM/yyyy"/>
</rich:calendar>
<rich:calendar id="dtInicialAutorizacaoRepasse"
value="#{gestaoPoloExtratoResumidoMB.dataInicialAutorizacaoRepasse}"
disabled="#{gestaoPoloExtratoResumidoMB.desabilitarDataAutorizacaoRepasse}"
required="#{gestaoPoloExtratoResumidoMB.dataAutorizacaoRepasseObrigatorio}"
title="${b['comum.dataInicialAutorizacaoRepasse']}"
label="${b['comum.dataInicialAutorizacaoRepasse']}"
direction="bottom-right"
datePattern="dd/MM/yyyy"
maxlength="10"
enableManualInput="#{gestaoPoloExtratoResumidoMB.desabilitarDataAutorizacaoRepasse}"
buttonIcon="/static/images/calendar.gif"
inputStyle="width:65px; color:#003F7B;"
inputClass="maskDate"
oninputfocus="maskDateInput();">
<f:convertDateTime type="date" pattern="dd/MM/yyyy"/>
</rich:calendar>
<rich:spacer width="5px"/>
<h:outputText value="${b['comum.a']}" styleClass="label" />
<rich:spacer width="5px"/>
<rich:calendar id="dtFinalAutorizacaoRepasse"
value="#{gestaoPoloExtratoResumidoMB.dataFinalAutorizacaoRepasse}"
disabled="#{gestaoPoloExtratoResumidoMB.desabilitarDataAutorizacaoRepasse}"
required="#{gestaoPoloExtratoResumidoMB.dataAutorizacaoRepasseObrigatorio}"
title="${b['comum.dataFinalAutorizacaoRepasse']}"
label="${b['comum.dataFinalAutorizacaoRepasse']}"
direction="bottom-left"
datePattern="dd/MM/yyyy"
maxlength="10"
enableManualInput="true"
buttonIcon="/static/images/calendar.gif"
inputStyle="width:65px; color:#003F7B;"
inputClass="maskDate"
oninputfocus="maskDateInput();">>
<f:convertDateTime type="date" pattern="dd/MM/yyyy"/>
</rich:calendar>
[/code]
and this <rich:jQuery>
[code]
<rich:jQuery id="mskDate" selector=".maskDate" name="maskDateInput" timing="onJScall" query="mask('99/99/9999',{placeholder:' '})" />
<rich:jQuery id="mskDateCompetencia" selector=".maskDateCompetencia" name="maskCampetenciaInput" timing="onJScall" query="mask('99/9999',{placeholder:' '})" />
[/code]
All calendar have a date mask, but in some the mask is wrong, the correctly format is "06/05/2011" but in the mask is "6 / 6 / 11"....
some people can help me :S, very hard this problem.....