How can I restrict the text entered into an input text element using jQuery?

Question

I have an input text element being used as a jQuery UI datepicker with a custom date format. The date format allows months to be entered in as JAN, FEB, etc and so the constrained input allows all characters to go through. See this question.

How can I restrict the text entered to match my date format "dd-M-yy"?

Is there a way to use jQuery to make the input text element behave like a masked edit text box?

Answer 1

I'd recommend using the jQuery MaskedInput plugin, assuming your input is fixed-width.

Answer 2

It's a bit dirty, but maybe you can use http://www.zurb.com/playground/jquery-text-change-custom-event to create your own filter?

The plugin isn't dirty mind you, it looks great, but it might be the wrong hammer for this nail.

Answer 3

if you are using a jquery date picker you have built in support for this allready inside the plugin

you can specify the "constrainInput" option inside the datepicker its a boolean just set it to true. and avcorse sepcify your date format.

http://docs.jquery.com/UI/Datepicker#option-constrainInput