Formatting date field with jQuery Masked Input

Asked

Viewed 8,864 times

2

Expensive, I searched and tested in many ways how to format a date field in jQuery but it’s not working.

I’ve imported the jQuery Masked Input in the JSP:

src='<%=renderResponse.encodeURL(renderRequest.getContextPath()
                        + "/js/jquery/jquery.maskedinput-1.2.2.js")%>'>

My date field:

<td align="right">Data Inicial:</td>
<td class="form_text"><input type="text" name="dataInicial" id="dataInicial">

And function jQuery so:

jQuery(function($){
   $("#dataInicial").mask("99/99/9999");
});

Can someone tell me if I’m eating ball somewhere?

jquery date
  • 1

    Try to simplify this way: jQuery("#dataInicial").mask("99/99/9999");

  • It worked dude!!!!!!! Thank you very much Oeslei.......

  • Have you checked if the script is actually being imported ?

2 answers

6


What happens is that you do not receive the jQuery object in the variable $, because its value is coming as a parameter by the function and not directly from the object window as usual. Using jQuery directly solves the problem:

jQuery("#dataInicial").mask("99/99/9999");

Or, pass jQuery as a parameter to the function:

(function($) {
    $("#dataInicial").mask("99/99/9999");
)(jQuery);

  • Without wanting to abuse, how would be the validation to check if the field was filled correctly using also jQuery?

  • There are several ways. You can do validation by hand or use a plugin. It’s not so easy, but it’s also not difficult. Internet content is not lacking. You can even search for validation plugins on the jquery website itself =)

1

I’m using the mask in the contact of my platform here. I did the test by adding your input and with the script below, I ran it regularly on localhost.

I tried to put the example in JSFIDDLE, but I had problems with external references.

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

If it doesn’t work, check the import order of the script and jQuery, and via Chrome view the imported elements. For this, follow the following instructions: Press F12 > Click Network > Refresh Page

Anything not found will turn red.

Also you can check the lack of script integrity via Console. For this, press F12 and then ESC.

Browser other questions tagged jquery date

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