# Tips and tricks #14: How to use a masked input

#### Tips and tricks series

This article may rely on knowledge you should get from previous articles, so you may want to check them first.

Our engine supports so-called "masked input", which allows user to more easily enter fixed width input for data in a certain format (like phone numbers and dates). We use the jquery.maskedinput plugin for that purpose. While you can refer to the original documentation, here are the things you need to know to use it for the calculators on this site.

• a - Represents an alpha character (A-Z,a-z)
• 9 - Represents a numeric character (0-9)
• * - Represents an alphanumeric character (A-Z,a-z,0-9)

#### Input settings

When you are adding masked input to your calculator, you can configure the following settings in the Input editor dialog:
Default value: Should conform to the mask
Placeholder: The string to be displayed if there is no default value or you have cleared it. Should conform to the mask in general.

The calculator below gives an example of such input - in the Date form field. Here are the settings:
Default value: 31.12.2014 00:00:00
Placeholder: DD.MM.YYYY hh:mm:ss

#### Handling the input value

You receive the input value as a string. Usually you grab the interesting parts using the Regex expression, because you know the format.

Here is the example of the code

const expr = new RegExp("(\\d{2})\\.(\\d{2})\\.(\\d{4})\\s(\\d{2}):(\\d{2}):(\\d{2})", "g");
if (!expr.test(datePoint)) throw { "source" : "datePoint", "message" : messages[ "bad" ] };
expr.lastIndex = 0;
const matches = expr.exec(datePoint);
const point = new Date(Number(matches[3]), Number(matches[2])-1, Number(matches[1]), Number(matches[4]), Number(matches[5]), Number(matches[6]), 0);

Of course with the example above one can enter a meaningless date, like 99.99.9999 99:99:99, so, for this case, it is also a good idea to validate the value you got.

#### Date and interval

Date plus the interval

Date minus the interval