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 using AngularJS, along with understanding its implementation through the example.

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 the 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 a 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.

Example: This example illustrates restricting the user to enter the date manually in the date field using AngularJS.

app.component.html

<div style="text-align:center">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>
        Restricting the user to enter
        date manually in date field
    </h3>
    <label for="vote">Select a date:</label>
    <input type="date" id="vote" name="vote"
        (keydown)="disableDate()">
</div>

app.component.ts

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

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: