CODEWITHSUNDEEP
html
pileup
pileup

Reputation: 3270

Input type text as formatted date with slashes

How can I mask input type "text" to look like date? I want it to be formatted as dd-mm-yyyy, and that it will add slashes whenever you reach the correct place, so if I type 30111970, it will automatically insert slashed in the corresponding places (as you type):

30/11/1970

I am using pattern currently, but I don't know how to add the slashes. This is my pattern for dd-mm-yyyy format:

(0[1-9]|1[0-9]|2[0-9]|3[01]).(0[1-9]|1[012]).[0-9]{4}

Upvotes: 1

Views: 1632

Answers (1)

Sudhir Ojha
Sudhir Ojha

Reputation: 3305

With HTML5 you could simply use the date input type:

<input type="date" name="somename" id="someid">

Or if you want manual input you can try following you have to execute a key up function:

<input
    type="text"
    name="date"
    placeholder="dd/mm/yyyy"
    onkeyup="
        var v = this.value;
        var regex=/^[a-zA-Z]+$/;
        if (!v.match(regex))
        {
             alert('Must input date or number');
             return false;
        }
        if (v.match(/^\d{2}$/) !== null) {
            this.value = v + '/';
        } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
            this.value = v + '/';
       }"
    maxlength="10"
>

Upvotes: 3

Related Questions