Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
  • 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.


  • 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:



    Restricting the user to enter 
    date manually in date field
<label for="vote">Select a date:</label>
<input type="date" id="vote" name="vote" 



import { Component } from '@angular/core';
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
export class AppComponent  {
      return false;



import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
export class AppModule { }


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!