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:
Last Updated :
06 Sep, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...