Masks

• Jun 21, 2024
• 3 minutes to read

This topic lists available mask types.

Date-Time

Date-time masks allow users to enter only date and/or time values. Users can navigate between mask sections (such as months, days, and hours) and increase/decrease section values with the Up and Down arrow keys and mouse wheel.

Run Demo: Masked Input — Date-Time Mask

You can choose a mask from a number of predefined patterns or use a standard or custom date and time format string. The following components support date-time masks:

• Date Edit
• Time Edit
• Masked Input

Date-Time Offset

Date-time offset masks allow users to enter only date and/or time values, including the time’s offset from Coordinated Universal Time (UTC). Users can navigate between mask sections (such as months, days, and hours) and increase/decrease section values with the Up and Down arrow keys and mouse wheel.

Run Demo: Masked Input — Date-Time Offset Masks

You can choose a mask from a number of predefined patterns or use a standard or custom date and time format string. The following components support date-time offset masks:

• Date Edit
• Masked Input

Date Only

Date only masks allow users to enter only date values. Users can navigate between mask sections (such as days and months) and increase/decrease section values with the Up and Down arrow keys and mouse wheel.

You can choose a mask from a number of predefined patterns or use a standard or custom date and time format string. The following components support date-time offset masks:

• Date Edit
• Masked Input

Time Only

Time only masks allow users to enter only time values. Users can navigate between mask sections (such as hours and minutes) and increase/decrease section values with the Up and Down arrow keys and mouse wheel.

You can choose a mask from a number of predefined patterns or use a standard or custom date and time format string. The following components support date-time offset masks:

• Time Edit
• Masked Input

Time Span

Time span masks allow users to enter only time intervals. Users can navigate between mask sections (such as days, hours, and minutes) and increase/decrease section values with the Up and Down arrow keys and mouse wheel.

Run Demo: Masked Input — Time Span Masks

You can choose a mask from a number of predefined patterns or use a standard or custom time span format string. The Masked Input component supports time span masks.

Numeric

Numeric masks allow users to enter only numeric values. Users can navigate between digits and increase/decrease digit values with the Up and Down arrow keys and mouse wheel.

Run Demo: Masked Input — Numeric Mask

You can choose a mask from a number of predefined patterns or use a standard or custom numeric format string. The following components support numeric masks:

• Spin Edit
• Masked Input

Text

Text masks allow users to enter only strings of limited length, such as phone numbers, zip codes, and social security numbers.

Run Demo: Masked Input — Text Mask

To create a text mask pattern, combine metacharacters, special characters, and literal characters. You can apply the resulting mask to the Masked Input component.

Regular Expression

If the mask types listed above do not meet your requirements, you can use regular expression masks. This mask type allows you to create advanced masks of variable length with multiple acceptable patterns and a limited range of character input.

Run Demo: Masked Input — Regular Expression Mask

To create a regular expression mask pattern, combine metacharacters, quantifiers, and literal characters. You can apply the resulting mask to the Masked Input component.