Format date as user types to dd/mm/yyyy in input

Question

I am looking for a solution to provide a user with a friendly field that formats the date accordingly to what they type. I noticed a lot of applications have it set up like that. So for example when a user types the first two numbers it will then insert a /. I am open to any suggestions. Thank you. This is just a standard input type:

<input type="text" name="input" placeholder="MM/DD/YYYY" required 
pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" 
title="Enter a date in this format MM/DD/YYYY"/>

duplicate https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date — Harshit, Feb 18 '19 at 15:23
SO is a place where we help you with your code. Show us some effort, and tell us what's going wrong, and we can help. — Mitya, Feb 18 '19 at 15:23
It's impossible, the user could be typing anything that doesn't necessarily correspond to a date — Dexygen, Feb 18 '19 at 15:23
Possible duplicate of [Why is my jquery input mask not working?](https://stackoverflow.com/questions/12324800/why-is-my-jquery-input-mask-not-working) — jherax, Feb 18 '19 at 15:57

score 0 · Accepted Answer · answered Feb 18 '19 at 15:50

This seemed to work great for me: How to auto format textbox inputs

    $("input[name='birthdate']:first").keyup(function(e){
    var key=String.fromCharCode(e.keyCode);
    if(!(key>=0&&key<=9))$(this).val($(this).val().substr(0,$(this).val().length-1));
    var value=$(this).val();
    if(value.length==2||value.length==5)$(this).val($(this).val()+'/');
});

Format date as user types to dd/mm/yyyy in input

1 Answers1