How do I make a form field in html with the specified pattern (MM/DD/YYYY) that adds a "/" automatically after two integers are typed.

I currently have:

                    <input type="text" wicket:id="singleDateField" pattern="(?:(?:0[1-9]|1[0-2])[\/\\-. ]?(?:0[1-9]|[12][0-9])|(?:(?:0[13-9]|1[0-2])[\/\\-. ]?30)|(?:(?:0[13578]|1[02])[\/\\-. ]?31))[\/\\-. ]?(?:19|20)[0-9]{2}"/>

But I need the form to add a "/" after two numbers are typed, then add a "/" after another two numbers are typed, and then not allow any further typing after the 4 digit year is typed. I want the formatting to be predetermined so an error message is unnecessary and the user cannot type in a an unacceptable date.

I hope this makes sense I could use the help!