Skip to content
Related Articles

Related Articles

How to Restrict User to Enter Date Manually in Date Field using AngularJS ?
  • Last Updated : 17 Dec, 2020

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()">

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;
  }  
}

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 { }

Output:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :