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()"> |
chevron_right
filter_none
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 ; } } |
chevron_right
filter_none
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 { } |
chevron_right
filter_none
Output: