How to set date default value for reactive form in Angular 6?

user_7548062 0
Viewed 13241

I have the form for date filter and I trying set the default value for the start and end date for date inputs.

<form [formGroup]="filter" (ngSubmit)="applyFilter()">
<mat-form-field>
    <input matInput [matDatepicker]="start" formControlName="start" placeholder="Начальная дата">
    <mat-datepicker-toggle matSuffix [for]="start"></mat-datepicker-toggle>
    <mat-datepicker #start></mat-datepicker>
</mat-form-field>
<mat-form-field>
    <input matInput [matDatepicker]="end" formControlName="end" placeholder="Конечная дата">
    <mat-datepicker-toggle matSuffix [for]="end"></mat-datepicker-toggle>
    <mat-datepicker #end></mat-datepicker>
</mat-form-field>

And TS part

refreshFilter() {
  const now = new Date();
  const monthAgo = new Date().setMonth(now.getMonth() - 1).toString();
  console.log(monthAgo)
  console.log(now)
  this.filter = new FormGroup({
  start: new FormControl(monthAgo, []),
  end: new FormControl(now, [])
  });

}

My console.log() for the month ago is 1533908066234 but for new Date is Mon Sep 10 2018 16:34:26 GMT+0300 and with timestamp form input doesn't work. How to get correct format date of month ago for success setting into FormControl?

angular-forms angular timestamp javascript
3 Answers

If you Want to format a date in Angular you can use the DatePipe Try to use the pipe to format. This allows you to format a date value according to locale rules. If you need more info about this you also can check here: https://angular.io/api/common/DatePipe

Also do this monthAgo.toLocaleDateString()

I hope this helps!

user_102023820

I followed the following steps and it worked as expected:

  • created a new Angular 6 app using CLI and added Angular Materials to project
  • imported FormsModule and ReactiveFormsModule in app.module.ts
  • copied exactly the same html markup as you provided into app.component.html

  • added the below code in app.component.ts

    import { Component, OnInit } from '@angular/core';
import {FormControl, FormGroup} from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  filter: FormGroup

  ngOnInit() {


    let now = new Date();
let monthAgo = new Date();
monthAgo.setMonth(now.getMonth() - 1);

this.filter = new FormGroup({
  start: new FormControl(monthAgo, []),
  end: new FormControl(now, [])
  });

    

  }
}

Hope this helps.

user_78788190

I found the solution:

const now = new Date();
const monthAgo = new Date(now.getFullYear(), now.getMonth() - 1, now.getDate(), now.getHours());
this.filter = new FormGroup({
    start: new FormControl(monthAgo , []),
    end: new FormControl(now, [])
});

I converting the date from timestamp to string format. That's all.

If somebody knows how to rewriting this more elegantly, I would be grateful.

user_75480620
Related