Masking for date field

Navigation
2

Anyone who has used type="date" fault5 has certainly noticed that although the date is visible in DD / MM / YYYY format, when you retrieve value from JavaScript , it is in the format YYYY-MM-DD .

What I want is precisely to reproduce this same effect. The user sees the information in X format, writes in X format, but is actually in Y format.

Would anyone know how to make this kind of masking (if at all possible) ? Or at least where can I find some material relevant to my doubt?
I'm looking at other forums and lord Google, but all I find are the custom formatting of how to move from one format to another.

I know you have the "what to do if you have it ready" class, but my proposal is to learn. I liked the effect created and, if it is possible to reproduce it, I would like to know how.

- EDIT -
The effect I'm trying to create is this here:

    
asked by anonymous 08.04.2014 / 16:23

1 answer

2

Well, in HTML5 as long as the element has an ID, this element will be stored in a variable whose id is the ID that was defined in HTML. Then inside a property of this input you can set the text you want from an event.

In the example below I did this: every time the user types a letter, it takes the contents of the textbox, does the treatment I want, and adds the treated text in the hiddenValue property of the textbox itself, later when it suits me , I retrieve the value that way. 

<!DOCTYPE html>

<html>
    <head>
        <title>HTML Element as var</title>
        <meta charset="utf-8" />
    </head>

    <body>
        <input id="username" value="" placeholder="hamboldt" onkeyup="getText(this);"/>
        <button onclick="alert(username.hiddenValue);">Ver valor escondido.</button>
    </body>

    <script type="text/javascript">
        function getText(input) {
            input.hiddenValue = input.value + "hidden";
        }
    </script>

</html>
    
08.04.2014 / 16:52
Change the color of an HTML5 progress element Vagrant with PHP + MySQL + Linux + Puphpet + ZF2 too slow