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:

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

Explore