Entering Invalid Dates Is Not Possible Anymore in Angular Apps
Tags: angular, webdev
Published: 2021-09-15 11:57:33

---
title: Entering Invalid Dates Is Not Possible Anymore in Angular Apps
published: true
date: 2021-09-15 10:30:09 UTC
tags: angular, webdev
canonical_url: https://www.syncfusion.com/blogs/post/entering-invalid-dates-is-not-possible-anymore-in-angular-apps.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfv51l5eo05ziwmrnrgm.png
---

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](https://www.syncfusion.com/angular-ui-components/angular-datepicker "Link to 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](https://github.com/angular/angular-cli "Link to CLI tool for Angular on GitHub") 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](https://www.npmjs.com/package/@syncfusion/ej2-angular-calendars "Link to ej2-angular-calendars npm package") 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]**
```js
@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]**
```js
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]**
```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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Angular-DatePicker.png)<figcaption>Angular DatePicker</figcaption>

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**]

```js
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]**

```html
<div style="width: 300px; margin: auto;">
  <ejs-datepicker [enableMask]="enableMaskSupport">
  </ejs-datepicker>
</div>
```

![Enabling Mask Input in Angular DatePicker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Enabling-Mask-Input-in-Angular-DatePicker.png)<figcaption>Enabling Mask Input in Angular DatePicker</figcaption>

## 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](https://ej2.syncfusion.com/angular/documentation/datepicker/date-masking/#configure-mask-placeholder "Link to Configure Mask Placeholder documentation") 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**]

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

[**app.component.html]**

```html
<div style="width: 300px; margin: auto;">
  <ejs-datepicker [enableMask]="enableMaskSupport" [maskPlaceholder]="maskPlaceholderValue">
  </ejs-datepicker>
</div>

```

![Configuring Mask Placeholder in Angular DatePicker](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Configuring-Mask-Placeholder-in-Angular-DatePicker.png)<figcaption>Configuring Mask Placeholder in Angular DatePicker</figcaption>

## 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](https://www.syncfusion.com/blogs/wp-content/uploads/2021/09/Keyboard-Accessibility-in-Angular-DatePicker.png)<figcaption>Keyboard Accessibility in Angular DatePicker</figcaption>

## Reference

For more information, refer to the [Mask support in Angular DatePicker demos on the web](https://ej2.syncfusion.com/angular/demos/#/material/datepicker/input-mask "Link to Mask Support in Angular DatePicker demo on web") and the [GitHub](https://github.com/syncfusion/ej2-angular-ui-components/tree/master/components/calendars "Link to Mask Support in Angular DatePicker demo on 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](https://www.syncfusion.com/angular-ui-components/angular-datepicker "Link to 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](https://www.syncfusion.com/account/manage-trials/downloads "Link to the free evaluation of the Syncfusion Essential Studio"). Feel free to have a look at the [documentation](https://ej2.syncfusion.com/angular/documentation/datepicker/date-masking/ "Link to Mask Support in Angular DatePicker component 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](https://www.syncfusion.com/forums/blazor-components "Link to the Syncfusion support forum") or [Direct-Trac](https://www.syncfusion.com/support/directtrac/incidents/newincident "Link to the Syncfusion support system Direct Trac"). We are always happy to assist you!

## Related blogs

- [Update Data Without Re-rendering an Entire Grid in Angular](https://dev.to/karthickramasamy08/how-to-update-data-without-rerendering-an-entire-grid-in-angular-3o7p-temp-slug-8959103 "Link to How to Update Data Without Rerendering an Entire Grid in Angular blog")
- [Load and View PDF Files in an Angular App](https://dev.to/syncfusion/how-to-load-and-view-pdf-files-in-an-angular-app-bjb "Link to How to Load and View PDF Files in an Angular App blog")
- [A Complete Guide to Running a Full-Stack Angular Application in a Monorepo](https://dev.to/syncfusion/a-complete-guide-to-running-a-full-stack-angular-application-in-a-monorepo-kbg "Link to A Complete Guide to Running a Full-Stack Angular Application in a Monorepo blog")
- [Binding a Firebase Data Source to Grid Using AngularFire2](https://dev.to/syncfusion/binding-a-firebase-data-source-to-grid-using-angularfire2-oki "Link to Binding a Firebase Data Source to Grid Using AngularFire2 blog")