How to use jquery to form the date field for month and year?

Asked

Viewed 116 times

-3

I’m using the lib of maskedinput jquery to format the data field, but I would like the field to be formatted as follows... 99/9999

Eu fiz essa tentativa, mas não deu certo;
    $(function() {
        $(".date").mask("99/9999");
    });

HTML

   <div class="col-sm-2">
                            <input autocomplete="off" id="idPeriodoInicio" class="form-control data listar_uj" name="periodoInicio" id="periodoInicio"  placeholder="Período Inicial">
                          </div>

What I could do to format the field for month and year?

Look how it is today!

inserir a descrição da imagem aqui

jquery
  • 4

    Maybe it didn’t work out because the class is wrong. It would have to be $(".data") and not $(".date"). Do not forget also to load the lib.

  • unfortunately did not resolve.

  • 2

    So there are more things wrong, because with the code you put in the question just changing from .date for .data generated the expected result: https://jsfiddle.net/o14tkpe3/.

  • By the image shown in the question, the field already has a mask and you want to change it?

  • Somewhere in your system is there not something like $(".date").mask("99/99/9999"); ? maybe it’s giving conflict

  • Yes, because it is picking up already defined settings of masks, you can take the class ". date" of your input and put a custom class with the mask in the desired format.

Show 1 more comment

3 answers

1

To avoid settings of other masks already defined, try as follows:

HTML:

<div class="col-sm-2">
    <input autocomplete="off" id="idPeriodoInicio" class="form-control nova-classe" name="periodoInicio" placeholder="Período Inicial">
</div>

JS:

$(function() {
    $(".nova-classe").mask("99/9999");
});

1

Hello, check if there is no other call of mask for this field in question, why it seems he already has a date mask, then remove an id from the input, he is with two id’s, after that try to do so:

HTML:

<div class="col-sm-2">
    <input autocomplete="off" id="idPeriodoInicio" class="form-control data listar_uj" name="periodoInicio" placeholder="Período Inicial">
</div>

JS + JQUERY:

$(document).ready(function () {
    $(".data").mask("99/9999")
});

1


I did a test with your code and it works perfectly.

Only modification was to remove the duplicate id property from the input and change the call

of class . date to -> $(". date")

follow the example http://tpcg.io/WI6n9J

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.