CustomMask.cshtml

@using Syncfusion.EJ2
@section ControlsSection{
<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="control-label">
            Time (ex: 10:00 PM, 10:00 AM)
        </div>
        <ejs-maskedtextbox id="mask1" mask="00:00 >PM" customCharacters= "ViewBag.cusObj" floatLabelType="Never"></ejs-maskedtextbox>
        <div class="control-label">IP Address (ex: 212.212.111.222)</div>
        <ejs-maskedtextbox id="mask2" mask="[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9].[0-2][0-9][0-9]" floatLabelType="Never"></ejs-maskedtextbox>
    </div>
</div>
}

@section Meta{
    <meta name="description" content="The custom mask is done using custom characters as mask elements. Time format and IP address fields are achieved using the custom mask literals and regex." />
}

@section ActionDescription{
    <div id="action-description">
        <p>This sample demonstrates that the custom mask functionalities of MaskedTextBox component. Enter time value in meridiem format, and enter IP value in numeric format.</p>
    </div>
}

@section Description{
    <div id="description">
        <p>
            The custom mask is achieved by the following ways:
        </p>
        <p>
            <b>Custom characters:</b>
        </p>
        <p>
            You can form the mask with any non-mask elements (literals), and you can configure the behavior of that non-mask element as mask element through the customCharacters property.
        </p>
        <p>
            In this demo, the “Time” mask '99 : 99 >PM' contains the literals P and M, where it is configured to allow the inputs as 'P', 'A', 'p', 'a', and 'M', 'm'.
        </p>
        <p>
            <b>Regular expression:</b>
        </p>
        <p>
        <p>
            Alternatively, you can use the regular expressions as mask element to validate the input of the particular input place.
        </p>
        <p>
            Here, in the “IP Address” example, each character is masked by an regular expression to allow a particular range of values.
        </p>
            More information about MaskedTextBox can be found in this
            <a target="_blank"
               href="https://ej2.syncfusion.com/aspnetcore/documentation/maskedtextbox/mask-configuration/#custom-mask-elements">
                documentation section
            </a>.
        </p>
    </div>
}

@*custom code start*@
<style>
    .content-wrapper {
        width: 30%;
        margin: 0 auto;
        min-width: 185px;
    }

    .control-label {
        padding: 24px 0px 10px 0px;
        font-size: 12px;
    }
</style>
@*custom code end*@