Enable the Masked Input

28 Mar 20226 minutes to read

DateTimePicker has enableMask property that provides the option to enable the built-in date masking support.

CSHTML

@Html.EJS().DateTimePicker("element").EnableMask("true").Render()

Mask-input.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Sample()
        {
            return View();
        }
    }
}

The mask pattern is defined based on the provided date format to the component. If the format is not specified, the mask pattern is formed based on the default format of the current culture.

Keys	Actions
Up / Down arrows	To increment and decrement the selected portion of the date and time.
Left / Right arrows and Tab	To navigate the selection from one portion to next portion

CSHTML

<div class="control-section">
        <div class="control_wrapper">
            <div class="pane">
                <div class="tabs-wrap">
                    <div class="wrap">
                        // Specifies the masked DateTimePicker without format property.
                        @Html.EJS().DateTimePicker("element").EnableMask("true").Render()
                    </div>
                </div>
                <div class="tabs-wrap">
                    <div class="wrap">
                       // Specifies the masked DateTimePicker with format.
                       @Html.EJS().DateTimePicker("element").EnableMask("true").Format("M/d/yyyy").Render()
                    </div>
                </div>
            </div>
        </div>
    </div>

Date-format.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Sample()
        {
            return View();
        }
    }
}

Configure Mask Placeholder

You can change mask placeholder value through property maskPlaceholder. By default, it takes the full name of date and time co-ordinates such as day, month, year, hour etc.

While changing to a culture other than English, ensure that locale text for the concerned culture is loaded through load method of L10n class for mask placeholder values like below.

//load the locale object to set the localized mask placeholder value
L10n.load({
'de': {
    'datetimepicker': { day: 'Tag' , month: 'Monat', year: 'Jahr', hour: 'Stunde' ,minute: 'Minute', second:'Sekunden' }
}
});

CSHTML

<div class="control-section">
        <div class="control_wrapper">
            <div class="pane">
                <div class="tabs-wrap">
                    <div class="wrap">
                        // Specifies the masked DateTimePicker with format property.
                        @Html.EJS().DateTimePicker("element").EnableMask("true").Render()
                    </div>
                </div>
                <div class="tabs-wrap">
                    <div class="wrap">
                       // Specifies the masked DateTimePicker without format.
                       @Html.EJS().DateTimePicker("element").EnableMask("true").MaskPlaceholder(new Syncfusion.EJ2.Calendars.DateTimePickerMaskPlaceholder {Day = "d", Month = "M", Year = "y", Hour="h", Minute="m", Second="s"}).Render()
                    </div>
                </div>
            </div>
        </div>
    </div>

Mask-placeholder.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Sample()
        {
            return View();
        }
    }
}