Jquery mask does not work

Question

I’m trying to use the jquery mask, I’ll use it a < input > added by javascript by the action of selecting a < 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>

Answer 1

jQuery Masked Input was made to work with text inputs. You are trying to insert a mask into a type field date (which, by itself, does not need formatting by bringing it automatically respecting the default rules of dates based on your locale). Change the type of its input to text that the mask must work.

Answer 2

The problem that occurs is due to you adding the mask when the page is initialized, but when this occurs there is still no element with the id="dia" loaded into the HTML document.

So how are you dynamically adding the element with id="dia" in the document, you will also have to add the mask dynamically after you add the elements in the HTML document.

Follow below in the example how you can solve your problem:

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>