Masking for date field

Asked

Viewed 176 times

2

Who ever used the type="date" HTML5 certainly noted that although the date is visible in the DD/MM/YYYY, when you retrieve the value by Javascript, it is in the format YYYY-MM-DD.

What I want is just to reproduce that 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 do that kind of masking (if it is possible)? Or at least where I can find some material relevant to my doubt?
I’m searching other forums and on lord Google, but all I find are the usual formatting of how to move from one format to the other.

I know you have the "what to do if you’re 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 one: inserir a descrição da imagem aqui

javascript html5 css3

  • What I do in my case is: I get the date in javascript format YYYY-MM-DD and convert to DD/MM/YYYY. That’s what you want to do?

  • @Cesarmiguel No. What I want is to reproduce the same effect created by type="date" HTML5. For the user the date will be in the format DD/MM/YYYY but for the code it will be in the format YYYY-MM-DD.

  • You want it visually to be YYYY/MM/DD ?

  • @Fulvius No. Visually will be in format DD/MM/YYYY, but the code will be in format YYYY-MM-DD.

  • Sorry I didn’t understand your doubt

  • @Júliopradera, don’t forget that the attribute date only works on Chrome. However, I was wrong to reply, what I am doing in javascript is to receive in the format DD/MM/YYYY and convert to YYYY-MM-DD and send to the controller

  • @I put an image to illustrate my doubt.

Show 2 more comments

1 answer

2

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

In the example below I did so: every time the user type a letter, he takes the contents of the textbox, does the treatment I want, and adds the treated text in the hiddenValue property of the textbox itself, then when it is convenient for me, I recover the value in 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>

  • It’s not exactly what I’m looking for. For such, I would still have to format the date at the time of page loading. But the proposal is very interesting. It will be useful to me in a "problem" that I am having. Thank you very much.

  • Julio, if this is the effect you are looking for it is also possible to add a function to be called in the onload to process the value of input and generate the hiddenValue.

  • @Anthonyaccioly I had already thought about it, but then it occurred to me that the field can be changed dynamically. So every time the field is dynamically changed, you need to call a function to do this. If I can reproduce the desired effect, I intend to add it to my library, used here at work. So calling a function every time you change the field value can be kind of boring.

  • You can use the Mutationobserver to address that kind of change. But Julio, really, feeling what you want to do I’m really going to have to agree with your self-criticism and tell you not to reinvent the wheel. These solutions begin to become inefficient and bring every kind of problem of cross-browser swiftly. In addition to that one hour you will realize that this is a subproblem of the real problem (Binding between view and model), a problem well solved by libraries like Knockout and Angularjs.

Browser other questions tagged javascript html5 css3

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