0

Estou tentando usar a mascara do jquery, vou usar ele um < input > adicionado pelo javascript pela ação de selecionar um < option >.

<script src="jquery-1.5.2.min.js"></script>
<script src="jquery.maskedinput-1.3.min.js"></script>
<select name="opcao" id="sel" onchange="muda()" class="form-control">
        <option value="option1">option1</option>
        <option value="option1">option1</option>
</select>
<div class='col-sm-9 text-left' id="rdo">
    </div>
<script type="text/javascript">
function muda() {
  if (document.getElementById("sel").value == "option1") {
    document.getElementById('rdo').innerHTML =
      "<div class='form-group'><label class='col-sm-2' for='dia' control-label>Dia</label><div class='col-sm-9'><input class='form-control' type='date' name='dia' id='dia' required autofocus></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='hora' control-label>Hora</label><div class='col-sm-9'><input class='form-control' type='time' name='hora' required></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='local' control-label>Local</label><div class='col-sm-9'><input class='form-control' size='251' maxlength='250' type='text' name='local' required></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='endereco' control-label>Endere&ccedil;o</label><div class='col-sm-9'><input class='form-control' maxlength='500' type='text' name='endereco' required></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='obs' control-label>OBS</label><div class='col-sm-9'><input class='form-control' maxlength='500' type='text' name='obs'></div></div>";
  } else {
    document.getElementById('rdo').innerHTML = "";
  }

}
</script>
<script>
jQuery(function($) {
  $("#dia").mask("99/99/9999")
});
</script>
0

2 Respostas 2

0

O problema que ocorre é devido você adicinar a máscara quando a página é inicializada, porém quando isso ocorre ainda não existe o elemento com o id="dia" carregados no documento HTML.

Então como você está adicionando dinamicamente o elemento com id="dia" no documento, você também vai ter que adicionar a máscara dinamicamente depois que você adicionar os elementos no documento HTML.

Segue abaixo no exemplo como você pode resolver seu problema:

function muda() {
  if (document.getElementById("sel").value == "option1") {
    document.getElementById('rdo').innerHTML =
      "<div class='form-group'><label class='col-sm-2' for='dia' control-label>Dia</label><div class='col-sm-9'><input class='form-control' type='date' name='dia' id='dia' required autofocus></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='hora' control-label>Hora</label><div class='col-sm-9'><input class='form-control' type='time' name='hora' required></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='local' control-label>Local</label><div class='col-sm-9'><input class='form-control' size='251' maxlength='250' type='text' name='local' required></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='endereco' control-label>Endere&ccedil;o</label><div class='col-sm-9'><input class='form-control' maxlength='500' type='text' name='endereco' required></div></div>" +
      "<div class='form-group'><label class='col-sm-2' for='obs' control-label>OBS</label><div class='col-sm-9'><input class='form-control' maxlength='500' type='text' name='obs'></div></div>";
  } else {
    document.getElementById('rdo').innerHTML = "";
  }
  
  $("#dia").mask("99/99/9999")

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.3.1/jquery.maskedinput.min.js"></script>

<select name="opcao" id="sel" onchange="muda()" class="form-control">
        <option value="option1">option1</option>
        <option value="option1">option1</option>
</select>

<div class='col-sm-9 text-left' id="rdo">
    </div>

0

O jQuery Masked Input foi feito para funcionar com inputs de texto. Você está tentando inserir uma máscara em um campo tipo date (que, por si só, não precisa de formatação por trazê-la automaticamente respeitando as regras de padrão de datas baseadas no seu locale). Mude o type do seu input para text que a máscara deve funcionar.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .