How to Restrict User to Enter Date Manually in Date Field using AngularJS ?

In this article, we will see how to restrict the user to enter the date manually in the date field.

Approach:

• First, we need to write the code for input, and we need to give its type as the date in the HTML file.
• Then in-order to restrict the user to enter date manually we can use onkeydown event.
• In the onkeydownevent we need to return false so that we can restrict the user to enter the date manually.
• In order to achieve the above objective, we need to write and function and return false in the ts file.
• As we restricted the user to enter the date normally, the user can only enter the date from the calendar.
• After completing the above steps save and run the project in order to see the output.

Code Implementation:

app.component.html:

HTML

<h1>
    Restricting the user to enter
    date manually in date field
</h1>

<label for="vote">Select a date:</label>

<input type="date" id="vote" name="vote"
    (keydown)="disableDate()">

app.component.ts:

Javascript

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {

  disableDate(){
      return false;
  }
}

app.module.ts:

Javascript

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Output: