1 Reply Latest reply on May 9, 2011 12:36 PM by Estevao Jordao

    Problem with rich:calendar and jQuery maskedinput plugin

    Estevao Jordao Newbie

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