Add a template to an input field

Question

This is for an application using AngularJS (if it matters).

I'm looking for a way to add some sort of a "template" to a HTML input field, much like a placeholder. See, I have this date-field, in which the user can type the date, or he can use a datepicker to select the date.

I currently have an HTML input field with a placeholder: "dd/MM/yyyy", which shows the format in which the date should be entered. now what I would like is a kind of placeholder that stays while the user types - and possibly even limits the users options (for instance: only numbers are allowed, nothing else is possible). Ideally, the placeholder should stay while the user types so he can see what the format is while he is typing. The user should (if possible) also be restricted from typing any not allowed characters.

Does anyone know of any already-existing solutions to this use case? I've been searching for a while now but don't seem to be using the right words ...

Addition: I know I still have to check the user's input server side. I'm not relying on JS for the validation of the date.

Answer 1

You can look at this: http://forza.ndevrstudios.com/#/form-masks

It's done with latest angular-ui (http://angular-ui.github.io/ui-utils/) and something like this in your input field:

ui-mask="99/99/9999" model-view-value="true"