Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (150).NET Core  (25)Angular  (48)ASP.NET  (48)ASP.NET Core  (64)ASP.NET MVC  (86)Azure  (28)Blazor  (91)DocIO  (20)Essential JS 2  (69)Essential Studio  (162)File Formats  (18)Flutter  (102)JavaScript  (148)Microsoft  (101)PDF  (59)React  (33)Succinctly series  (122)Syncfusion  (472)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (26)Webinar  (24)Windows Forms  (55)WinUI  (16)WPF  (119)Xamarin  (127)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (3)Build conference  (6)Business intelligence  (53)Button  (4)C#  (107)Chart  (50)Cloud  (9)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (45)Development  (252)Doc  (7)DockingManager  (1)eBook  (93)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (20)Extensions  (13)File Manager  (4)Gantt  (9)Gauge  (6)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (214)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (22)Performance  (6)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (5)Road Map  (9)Scheduler  (26)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (18)Solution Services  (2)Spreadsheet  (9)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (10)Tips and Tricks  (57)UI  (117)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (19)Visual Studio Code  (10)Web  (205)What's new  (125)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Entering Invalid Dates Is Not Possible Anymore in Angular Apps

Entering Invalid Dates Is Not Possible Anymore in Angular Apps

How many times have you seen people making mistakes while entering dates? It is mostly due to the lack of clarity in the UI as to format.

The Syncfusion Angular DatePicker provides mask support to improve the user experience while entering dates by providing month, day, and year fields. These help users enter valid dates in the correct format and also keep them from entering invalid input dates.

For example, if you enter 6 (June) in the month field, then you can enter only dates from 1 to 30 in the day field. The component won’t allow you to enter values above 30.

In this blog post, we will see how to get started with the Angular DatePicker and enable mask support to easily handle dates in it.

Setup Angular environment

Follow these steps to set the angular CLI projects using the Angular CLI tool.

  1. First, install the latest version of Angular CLI locally in your application using the following command.
    npm install -g @angular/cli@latest

    Note: If you would like to follow and run the application in Angular 8 to 11, you need to replace the CLI command version number with the corresponding Angular version number.

    npm install -g @angular/cli@<CLI VERSION>
  1. Now, create a new Angular project by using the ng new command and navigate to the created project folder. Here, I am naming this Angular project angular-datepicker-mask.
    ng new < angular-datepicker-mask>
    cd < angular-datepicker-mask>
  1. Then, use the following command to install the ej2-angular-calendars npm package locally in the application.
    npm install @syncfusion/ej2-angular-calendars --save

Adding Angular DatePicker

Follow these steps to include the Angular DatePicker component in your application.

  1. The following CSS files are available in the ../node_modules/@syncfusion package folder. This can be referenced in the [src/styles.css] file using the following code.
    [styles.scss]

    @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
    @import '../node_modules/@syncfusion/ej2-angular-calendars/styles/material.css';
  1. Then, import the DatePicker module into the Angular application (app.module.ts) from the ej2-angular-calendars package. Refer to the following code example.
    [app.module.ts]

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
    import { AppComponent } from './app.component';
    
    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,DatePickerModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
  1. Next, define the Angular DatePicker within the component.html file mapped against the templateUrl option in the app.component.ts file.
    [app.component.html]

    <ejs-datepicker></ejs-datepicker>
  1. Now, run the application with the ng serve command and it will display a DatePicker on the browser like in the following screenshot.

    Angular DatePicker
    Angular DatePicker

Thus, we have included the DatePicker component in our Angular application. Let’s see how to enable the mask support to easily handle dates in the Angular DatePicker.

Enable mask input

You can use the enableMask property to enable the built-in date format masking. By default, the mask pattern is formatted based on the current culture.

To use mask support, inject the MaskedDateTimeService module into the Angular DatePicker.

Refer to the following code example.

[app.component.ts]

import { Component } from '@angular/core';
import { MaskedDateTimeService } from '@syncfusion/ej2-angular-calendars';  

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.scss'],
  templateUrl: './app.component.html',
  providers: [MaskedDateTimeService],
})
export class AppComponent {
  title = 'angular-datepicker-mask';
  public enableMaskSupport: boolean = true;
}

[app.component.html]

<div style="width: 300px; margin: auto;">
  <ejs-datepicker [enableMask]="enableMaskSupport">
  </ejs-datepicker>
</div>
Enabling Mask Input in Angular DatePicker
Enabling Mask Input in Angular DatePicker

Configure mask placeholder

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

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

Refer to the following code example in which we have customized the default month/day/year format to MM/dd/yyyy.

[app.component.ts]

public maskPlaceholderValue: Object = {day: 'dd', month: 'MM', year: 'yyyy'}

[app.component.html]

<div style="width: 300px; margin: auto;">
  <ejs-datepicker [enableMask]="enableMaskSupport" [maskPlaceholder]="maskPlaceholderValue">
  </ejs-datepicker>
</div>
Configuring Mask Placeholder in Angular DatePicker
Configuring Mask Placeholder in Angular DatePicker

Keyboard accessibility

Also, the mask support in Angular DatePicker provides keyboard interaction to easily handle dates. With this, you can change the values, increments, and decrements of the selected portions of date and time coordinates using the Up and Down arrow keys.

You can also use the Right and Left arrow keys to navigate from one segment to another.

Keyboard Accessibility in Angular DatePicker
Keyboard Accessibility in Angular DatePicker

Reference

For more information, refer to the Mask support in Angular DatePicker demos on the web and the GitHub repository.

Conclusion

Thanks for reading! In this blog post, we have seen how to enable the masking feature to easily handle dates in our Angular DatePicker component. This feature helps users enter valid dates in the correct format and avoid data input errors.

Also, try our Angular DatePicker component by downloading a free 30-day trial. Feel free to have a look at the documentation to explore other available features.

If you have any questions, please let us know in the comments section below. You can also contact us through our support forum or Direct-Trac. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top