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

This article describes how to use a masked input in your calculators

This page exists due to the efforts of the following people:





Created: 2022-04-20 10:27:17, Last updated: 2022-04-20 10:29:39
Creative Commons Attribution/Share-Alike License 3.0 (Unported)

This content is licensed under Creative Commons Attribution/Share-Alike License 3.0 (Unported). That means you may freely redistribute or modify this content under the same license conditions and must attribute the original author by placing a hyperlink from your site to this work Also, please do not modify any references to the original work (if any) contained in this content.

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.

Supported mask definitions

  • 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:
Type: Masked input
Default value: Should conform to the mask
Mask: According to supported mask definitions, see above
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:
Type: Masked input
Default value: 31.12.2014 00:00:00
Mask: 99.99.9999 99:99:99
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.

PLANETCALC, Date and interval

Date and interval

Date plus the interval
Date minus the interval

URL copied to clipboard
PLANETCALC, Tips and tricks #14: How to use a masked input