Date Mask

User 2777638 Photo


Registered User
2 posts

I am trying to add a Date of Birth field with ability to type and have the field automatically add the slashes as needed. Is this possible through coffeecup?

I know how to add a place holder (MM/DD/YYYY) and RegEx (/[0-9]{2}/[0-9]{2}/[0-9]{4}/) to verify but people complain that they have to type / and cannot submit form.

Thanks
-Dimitry
User 187934 Photo


Senior Advisor
18,154 posts

Hi Dimitry,
This should work,
Add a html element to your form and paste the code below into it. Adjust the date1 to the actual name of your date input.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var jQ = $.noConflict(true);
// version 1
jQ( document ).ready(function() {
jQ('input[name="date1"]').bind('keyup','keydown', function(event) {
var inputLength = event.target.value.length;
if (event.keyCode != 8){
if(inputLength === 2 || inputLength === 5){
var thisVal = event.target.value;
thisVal += '/';
jQ(event.target).val(thisVal);
}
}
})
});
</script>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.