Search results

Mask Support in Angular DatePicker component

28 Jul 2021 / 2 minutes to read

The DatePicker has built-in support to masking the date value, when enableMask property set as true.

To use mask support, inject the MaskedDateTime module in the DatePicker.

Source
Preview
app.component.ts
app.module.ts
main.ts
Copied to clipboard
import { Component} from '@angular/core';
import { MaskedDateTimeService } from '@syncfusion/ej2-angular-calendars';
@Component({
    selector: 'app-root',
    template: `
        <ejs-datepicker [format]="format" [enableMask]="enableMaskSupport"></ejs-datepicker>
        `,
    providers: [MaskedDateTimeService],
})
export class AppComponent {
constructor( ) {
    }
    public enableMaskSupport: boolean = true;
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        DatePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);

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.

The selected portions of date and time co-ordinates can be incremented and decremented using the Up/Down arrow keys. You can also use Right/Left arrow keys to navigate from one segment to another.

The following example demonstrates default and custom format of DatePicker component with mask.

Source
Preview
app.component.ts
app.module.ts
main.ts
format.html
styles.css
Copied to clipboard
import { Component } from '@angular/core';
import { MaskedDateTimeService } from '@syncfusion/ej2-angular-calendars';
@Component({
    selector: 'app-root',
    templateUrl: './app/format.html',
    providers: [MaskedDateTimeService],
})
export class AppComponent {
constructor( ) {
    }
    public format: string = "dd/MM/yyyy";
    public enableMaskSupport: boolean = true;
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        DatePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<div class="innerwrap">
<span>Masked DatePicker without format:</span> <ejs-datepicker [enableMask]="enableMaskSupport"></ejs-datepicker>
</div>
<div class="innerwrap">
<span>Masked DatePicker with format:</span> <ejs-datepicker [format]="format" [enableMask]="enableMaskSupport"></ejs-datepicker>
</div>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

#element {
    display: inline;
}

#wrapper {
    width: 250px;
    margin: 0 auto;
}

.innerwrap{
height:100px;
max-width: 400px;
margin: 0 auto;
}

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.

Copied to clipboard
//Load the L10n from ej2-base
import { L10n } from '@syncfusion/ej2-base';

//load the locale object to set the localized mask placeholder value
L10n.load({
'de': {
    datepicker: { day: 'Tag' , month: 'Monat', year: 'Jahr' }
}
});

The following example demonstrates default and customized mask placeholder value.

Source
Preview
app.component.ts
app.module.ts
main.ts
maskplaceholder.html
styles.css
Copied to clipboard
import { Component } from '@angular/core';
import { MaskedDateTimeService } from '@syncfusion/ej2-angular-calendars';
@Component({
    selector: 'app-root',
    templateUrl: './app/maskplaceholder.html',
    providers: [MaskedDateTimeService],
})
export class AppComponent {
constructor( ) {
    }
    public enableMaskSupport: boolean = true;
    public maskPlaceholderValue: Object = {day: 'd', month: 'M', year: 'y'}
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';


/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        DatePickerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<div class="innerwrap">
    <span>Masked DatePicker without mask placeholder:</span> <ejs-datepicker [enableMask]="enableMaskSupport"></ejs-datepicker>
    </div>
    <div class="innerwrap">
    <span>Masked DatePicker with mask placeholder:</span> <ejs-datepicker [enableMask]="enableMaskSupport" [maskPlaceholder]="maskPlaceholderValue" ></ejs-datepicker>
    </div>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}

#element {
    display: inline;
}

#wrapper {
    width: 250px;
    margin: 0 auto;
}

.innerwrap{
height:100px;
max-width: 400px;
margin: 0 auto;
}