Problem with p:calendar and p:selectOneMenu

[edilmar]

Hi,

I use PFM 6.0 and when I have a p:calendar and below one or more p:selectOneMenu,
the mobile browser doesn't work with p:calendar days, it clicks the p:selectOneMenu
that is below, it only works if the day is "lucky" and positioned in a region out of all the
other components in the page.

[edilmar]

Any ideas?

[timcahiu1]

What is Your email address , I will guide you

[edilmar]

I tested the calendar from RichFaces, and it works fine. The problem is that RichFaces doesn't have mobile support like PrimeFaces.

[edilmar]

Solved, configuring z-index 99999 in p:calendar and z-index 1 in all other comps.

[dramasee]

What is Your teamview address , I will guide you

[mraz]

Can u share the solution? I need to use a calendar too.
I decided to use an input with a mask but still don't have a solution, because primefaces mobile don't have support to inputMask.

[edilmar]

1) use zindex like I explained before
2) Here the code for the calendar with calls for JS functions:

Code: Select all

<p:calendar id="dataInicio" value="#{contapagapp.dataInicio}" pattern="dd/MM/yyyy" style="z-index: 99999;"
  onblur="return setEnteredDate(this);"
  onkeypress="return editMask('contapag:formCad:dataInicio_input', '99/99/9999', event);" />

3) And the JS functions:

Code: Select all

//-------------------------------------------------------------------------------------------------
function setEnteredDate(comp) {
  var enteredDate = comp.value;
  var lengthAll = enteredDate.length;
  enteredDate = TirarOutrosASCII(enteredDate);
  var length = enteredDate.length;
  var DataAtual = new Date();
  var dia = DataAtual.getDate();
  if (dia < 10)
    dia = "0" + dia;
  var mes = DataAtual.getMonth() + 1;
  if (mes < 10)
    mes = "0" + mes;
  var ano = DataAtual.getFullYear();
  if (ano < 100)
    ano = "20" + ano;
  switch (length) {
    case 1: 
      if (enteredDate == "0")
        DataAtual = dia + "/" + mes + "/" + ano;
      else
        DataAtual = "0" + enteredDate + "/" + mes + "/" + ano;
      break;
    case 2:
      DataAtual = enteredDate + "/" + mes + "/" + ano;
      break;
    case 3:
      DataAtual = enteredDate.substring(0,2) + "/0" + enteredDate.substring(2,3) + "/" + ano;
      break;
    case 4:
      DataAtual = enteredDate.substring(0,2) + "/" + enteredDate.substring(2,4) + "/" + ano;
      break;
    case 5:
      DataAtual = enteredDate.substring(0,2) + "/" + enteredDate.substring(2,4) + "/200" + enteredDate.substring(4,5);
      break;
    case 6:
      DataAtual = enteredDate.substring(0,2) + "/" + enteredDate.substring(2,4) + "/20" + enteredDate.substring(4,6);
      break;
    case 7:
      DataAtual = enteredDate.substring(0,2) + "/" + enteredDate.substring(2,4) + "/2" + enteredDate.substring(4,7);
      break;
    //case 8:
    default:
      DataAtual = enteredDate.substring(0,2) + "/" + enteredDate.substring(2,4) + "/" + enteredDate.substring(4,8);
      if (enteredDate.length > 8) // tem hora
        DataAtual += comp.value.substring(10);
      break;
  }
  if (length > 0) {
    dia = parseInt(DataAtual.substring(0,2));
    mes = parseInt(DataAtual.substring(3,5));
    ano = parseInt(DataAtual.substring(7,11));
    if (
      (mes == 2 && ((dia > 29) || (dia == 29 && ano % 4 != 0))) ||
      ((mes == 4 || mes == 6 || mes == 9 || mes == 11) && dia > 30) ||
      (dia > 31)
      ){
      alert("Dia " + dia + " inválido para o mês " + mes + "!");
      comp.value = "";
      return;
    }
    if (mes > 12) {
      alert("Mês inválido!");
      comp.value = "";
      return;
    }
    if (lengthAll > 10 && DataAtual.length <= 10) // tem hora
      DataAtual += "00:00:00";
    enteredDate = DataAtual;
  }
  else
    enteredDate = "";
  comp.value = enteredDate;
}

function editMask(objName, sMask, evtKeyPress) {
  var input = getComponent(objName);
  return editCompMask(input, sMask, evtKeyPress);
}
function editCompMask(input, sMask, evtKeyPress) {
  if (input == null)
    return true;
  //
  var i, c, sValue, nTecla, nTeclaDel;
  //
  if(navigator.appName == "Netscape") { // Netscape
    nTecla = evtKeyPress.which;
    nTeclaDel = evtKeyPress.keyCode;
  }
  else {//if(document.layers) { // Internet Explorer
    nTecla = evtKeyPress.keyCode;
  }
  //
  if (nTecla == 13) {return true;} // enter
  if (nTecla == 8)  {return true;}
  if (nTecla == 9)  {return true;} // tab
  if (nTecla == 0)  {return true;} // tab
  //
  if (nTeclaDel == 46) {return true;}
  //
  sValue = input.value;  
  i = sValue.length;
//  if (sValue.length == sMask.length) {
//    return true;
//  }
  if (i < sMask.length) {
    if (sMask.charAt(i) == 'A') {
      if (nTecla > 96 && nTecla < 123)
        input.value += String.fromCharCode(nTecla).toUpperCase();
      return (nTecla > 64 && nTecla < 91);
    }
    if (sMask.charAt(i) == 'a') 
      return (nTecla > 96 && nTecla < 123);
    if (sMask.charAt(i) == '9' && sMask.length == 14 && sValue.length == sMask.length-1){
      sValue = sValue.replace(/\D/g, "");
      sValue = sValue.replace(/^(\d{2})(\d)/g, "($1)$2");
      sValue = sValue.replace(/(\d)(\d{3})$/, "$1-$2");
      input.value = sValue.toString();
      return (nTecla > 47 && nTecla < 58);
    } else if (sMask.charAt(i) == '9' && sValue.length < sMask.length) {
        return (nTecla > 47 && nTecla < 58);
    }
    for (c = i; c < sMask.length; c++) {
      if (sMask.charAt(c) != 'A' && sMask.charAt(c) != 'a' && sMask.charAt(c) != '9')
          input.value = input.value + sMask.charAt(c);
      else if (sMask.charAt(c) == 'A')
        return (nTecla > 64 && nTecla < 91);
      else if (sMask.charAt(c) == 'a')
        return (nTecla > 96 && nTecla < 123);
      else if (sMask.charAt(c) == '9')
        return (nTecla > 47 && nTecla < 58);
    }
  } 
  else 
    return false;
}