Question

我有日期过滤器的表单，我尝试为日期输入设置开始日期和结束日期的默认值。

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

和TS部分

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, [])
  });

}

我一个月前的console.log()是1533908066234，但新日期是Mon Sep 10 2018 16:34:26 GMT+0300，带有时间戳的表格输入无效。如何为成功设置到FormControl中的月份获取正确的格式日期？

Answer 1

如果要在Angular中格式化日期，可以使用DatePipe 尝试使用管道进行格式化。这使您可以根据语言环境规则设置日期值的格式。如果您需要更多有关此的信息，也可以在这里查看： https://angular.io/api/common/DatePipe

这个月也要这样做Ago.toLocaleDateString（）

我希望这会有所帮助！

Answer 2

我按照以下步骤操作，并且按预期工作：

使用CLI创建了一个新的Angular 6应用，并将Angular Materials添加到项目中
在app.module.ts中导入FormsModule和ReactiveFormsModule
复制了与您在app.component.html中提供的HTML标记完全相同的标记

在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, [])
  });


  }
}

希望这会有所帮助。

Answer 3

我找到了解决方法：

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, [])
});

我将日期从时间戳转换为字符串格式。就是这样。

如果有人知道如何更优雅地重写它，我将不胜感激。

如何在Angular 6中设置反应形式的日期默认值？

3 个答案: