Angular 8Bootstrap 4

Angular 8 date input binding date value

Angular 8 dynamic routing working example
Views

Hello to all, welcome to therichpost.com. In this post, I will tell you, Angular 8 date input binding date value.



In reactive form, I am binding form date input field with today date. I have used Angular 8 and Bootstrap 4.

Here are the complete steps, please follow carefully:

1. Here are the basics commands to install angular 8 on your system:

npm install -g @angular/cli 

ng new angulardate //Create new Angular Project

$ cd angulardate // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

 

2. After done with above, you need to run below commands to set bootstrap environment into your angular 8 application:

npm install --save bootstrap

 

3. Now you need to add below code into your angular.json file:

...
"styles": [
              "src/styles.css",
        "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": ["node_modules/bootstrap/dist/js/bootstrap.min.js"]
...

 

4. Now you need to add below code into your src/app/app.module.ts file:

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

 

5. Now you need to add below code into your src/app/app.component.ts file:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormsModule } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
  BirthDate:Date;
  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.BirthDate = new Date();
    this.registerForm = this.formBuilder.group({
    BirthDate : ''
    });
  }

}

 

6. Now you need to add below code into src/app/app.component.html file:

<div class="container">
  <h1 class="text-center">Angular 8 get dynamic today date in date field:</h1>
  <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
    <div class="form-group">
      <label>Date:</label>
      <div class="input-group">
        <input type="date" class="form-control" id="BirthDate" name="BirthDate"
        [ngModel]="BirthDate | date:'yyyy-MM-dd'"  formControlName="BirthDate">
      </div>
    </div>
  </form>
</div>

 

In the end, don’t forgot to run ng serve command. If you have any query then do comment below.

Jassa

Thank you.

Ajay Malhotra
the authorAjay Malhotra
Hello to all. Welcome to therichpost.com. Myself Ajay Malhotra and I am full stack developer. I love coding. I know Wordpress, Core php, Angularjs, Angular 2, Angular 6, Angular 7, laravel, Codeigniter, Shopify, Squarespace, Jquery, Google Map Api, Vuejs, Reactjs, Bigcommerce etc.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Positive SSL