how can we date mask a text field using javascript / jQuery?

Question

I am having a text field for date. Now i would like to mask this text field so that a user can input only date value. I even found a jQuery plugin for this. But that doesn't seems to help, as you can input 22/22/2222 in the field that too is accepted by this plugin, which is obviously not a valid date. What is the possible solution?

Answer 1

You can set the input to be readonly, and put a div around it that has the onclick set to call the calendar.

That way they can't change the value, but if they click on it they can set a new date.

Answer 2

try working from this http://digitalbush.com/projects/masked-input-plugin

if that does not work, try adapting from this code, changing ti to work for your months:

    function isZipKey(evt) {
    var charCode = (evt.which) ? evt.which : event.keyCode
    if (charCode > 31 && ((charCode < 48 || charCode > 57) && charCode != 45))
        return false;

    return true;
    }

    onkeypress="return isZipKey(this);"

Answer 3

If you want valid dates, you'll need to validate each keypress. Not a tiger I'd like to tackle personally. If you're not afraid of JavaScript (or JQuery), why not use a calendar GUI like Datepicker