Open In App
Related Articles

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

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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:

 



Last Updated : 06 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads