Angular TypeScript 如何分配日期

Question

如何将日期绑定到日期选择器？

const TodayDate = "19-11-2020";
ngOnInit() {
  this._MyregisterForm = this.formBuilder.group({
    today_Date:[this.TodayDate, [Validators.required]]
  });
}

HTML

<form [formGroup]="_MyregisterForm" (ngSubmit)="onSubmit()">
  <input type="date" formControlName="today_Date" value="{{TodayDate}}">
</form>

Answer 1

删除 value="{{TodayDate }}" 您正在将控件与 TodayDate 值绑定，这就足够了。

Answer 2

我会尝试在您的应用中将日期保持为 javascript 日期。这将使它们更容易以不同的方式格式化并将它们与 angular 材料日期选择器一起使用。

使用库 date-fns 将字符串解析为日期。

https://date-fns.org/v2.16.1/docs/parse

然后将该日期传递到 formBuilder。

Answer 3

使用formControlName

时无需在输入中放入value属性

Stackblitz Demo

component.html

<form [formGroup]="_MyregisterForm" (ngSubmit)="onSubmit()">
    <input type="date" formControlName="today_Date">
    <button type="submit">Submit</button>
</form>

component.ts

import { Component, VERSION } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { DatePipe } from "@angular/common";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"],
  providers: [DatePipe]
})
export class AppComponent {
  _MyregisterForm: FormGroup;
  TodayDate = "19-11-2020";

  constructor(private formBuilder: FormBuilder, private datePipe: DatePipe) {
    this._MyregisterForm = this.formBuilder.group({
      today_Date: [this.getTransformedDate(this.TodayDate), Validators.required]
    });
  }

  private getTransformedDate(date) {
    let date1 = date.split("-");
    let newDate = date1[2] + "-" + date1[1] + "-" + date1[0];
    return newDate;
  }

  onSubmit() {
    const date = this.datePipe.transform(
      this._MyregisterForm.get("today_Date").value,
      "dd-MM-yyyy"
    );
    alert(date);
  }
}

Answer 4

我提供了一个 Stackblitz just here。

日期格式不好，需要使用国际格式。而且，就像大家说的，你不需要绑定一个value.

_MyregisterForm: FormGroup;
TodayDate = "2020-12-10";

constructor(private formBuilder: FormBuilder) {
  this._MyregisterForm = this.formBuilder.group({
    today_Date: [this.TodayDate, Validators.required]
  });
}

<form [formGroup]="_MyregisterForm">
    <input type="date" formControlName="today_Date">
</form>
<pre>{{ _MyregisterForm.value | json }}</pre>

Answer 5

TodayDate应该是；

TodayDate = new Date();

并从 input

中删除 value 属性

Angular TypeScript 如何分配日期

Angular TypeScript how to assign Date

angular

angular-daterangepicker

angular-bootstrap-calendar