将 mat-datepicker 转换为字符串答案

【问题标题】：Convert a mat-datepicker into a String将 mat-datepicker 转换为字符串
【发布时间】：2021-10-02 14:29:42
【问题描述】：

我正在尝试一种反应形式，其中用户使用 mat-datepicker 输入了一些日期。我面临的问题是 mat-datepicker 的输出是一个包含日期的时刻对象。我想获取字符串中的日期（例如：“YYYY-MM-DD”）而不是对象。

目前，我的表单组件的 html 模板如下所示：

<form [formGroup]="myForm">
<mat-form-field>
    <mat-label>Date d'expiration</mat-label>
    <input matInput [matDatepicker]="picker" formControlName="expireDate">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

而且，我的组件看起来像这样：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms'
declare var require: any
const moment = require('moment');
@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent implements OnInit{
  myForm : FormGroup;
  constructor(private fb: FormBuilder) { }
  ngOnInit(): void {
    this.myForm =  this.fb.group({
      expireDate: [moment(),[
        Validators.required,
      ]],
    });
  }
}

提前致谢！

【问题讨论】：

标签： angular string angular-material mat-datepicker

【解决方案1】：

HTML

<form [formGroup]="myForm">
  <mat-form-field>
    <mat-label>Date d'expiration</mat-label>
    <input matInput [matDatepicker]="picker" formControlName="expireDate" (dateChange)="changeDatePicker()">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</form>

为表单组中的过期日期赋值

 changeDatePicker(): any {
        this.myForm.value.expireDate = moment(this.myForm.value.expireDate).format('YYYY-MM-DD');
      }

适用于多个日期选择器

HTML

<form [formGroup]="myForm">
  <mat-form-field>
    <mat-label>Date d'expiration</mat-label>
    <input matInput [matDatepicker]="picker" formControlName="expireDate" (dateChange)="changeDatePicker()">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>

  <mat-form-field>
    <mat-label>Date d'expiration</mat-label>
    <input matInput [matDatepicker]="picker1" formControlName="expireDate2" (dateChange)="changeDatePicker()">
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker #picker1></mat-datepicker>
  </mat-form-field>
</form>

myForm = this.fb.group({
    expireDate: ['', Validators.required],
    expireDate2: ['', Validators.required],
  });

changeDatePicker(): any {
    this.myForm.value.expireDate = (moment(this.myForm.value.expireDate).format('YYYY-MM-DD'));
    this.myForm.value.expireDate2 = (moment(this.myForm.value.expireDate2).format('YYYY-MM-DD'));
  }

【讨论】：

谢谢，我几乎做了同样的事情，唯一的区别是this.myForm.controls.expireDate.setValue(moment(this.myForm.value.expireDate).format('YYYY-MM-DD'));，它有效:)
如果您不介意，我还有一个问题，如果我有多个日期选择器并且我想将此方法应用于所有日期控件，该怎么办？我尝试使用控件名称作为参数调用我的方法，但它不起作用。你知道有什么办法吗？
我已经更新了多个日期选择器的代码

【解决方案2】：

您可以像以下示例一样格式化 moment 日期对象：

const currentDate = moment();
moment(currentDate).format('YYYY-MM-DD');

【讨论】：

您好，感谢您的回复，我不确定我应该在这里做什么。我有 expireDate ，其中包含时刻对象。我是否需要调用方法将其转换为 String ？我应该把你发送的代码放在哪里？我试图在之后粘贴它：const moment = require('moment'); 但它没有 expireDate 仍然是一个对象而不是一个字符串：/
@theophileWall，通过缺陷 mat-datepicker 管理或“对象日期”或时刻。胺告诉你，在发送到你的“服务”之前，你可以将字符串作为参数传递。有些像submit(dataForm){ if {dataForm.valid){ const data={...dataForm.value, expireDate:moment(dataForm.value.expireDate).format('YYYY-MM-DD")}; this.myservice.send(data)}}
完美运行，非常感谢您的解释！