使用材料日期选择器以角度反应形式将日期设置为 YYYY-MM-DDT00:00:00 格式答案

【问题标题】：set Date as YYYY-MM-DDT00:00:00 format in angular reactive forms with material date picker使用材料日期选择器以角度反应形式将日期设置为 YYYY-MM-DDT00:00:00 格式
【发布时间】：2021-03-24 17:07:08
【问题描述】：

我正在尝试使用带有 Moment 的 Material DatePicker 来格式化日期，并且我正在使用响应式表单。

所以这是我在 .ts 文件中设置 NextDeliverDate 值的代码

loadData() {
    this.getSubscriptionData().subscribe((x) => {
      this.subscription = x;
      console.log(moment(this.subscription.NextDelivery).format('YYYY-MM-DDT00:00:00'));
      this.subscriptionForm.setValue({
        ID: this.subscription.ID || '',
        CustomerID: this.subscription.CustomerID || '',
        CustomerUserName: this.subscription.CustomerUserName || '',
        CustomerFirstName: this.subscription.CustomerFirstName || '',
        CustomerLastName: this.subscription.CustomerLastName || '',
        AddressID: this.subscription.AddressID || '',
        OrderID: this.subscription.OrderID || '',
        PaymentID: this.subscription.PaymentID || '',
        ProductID: this.subscription.ProductID || '',
        Quantity: this.subscription.Quantity || 0,
        Price: this.subscription.Price || 0,
        Total: this.subscription.Total || 0,
        FrequencyWeeks: this.subscription.FrequencyWeeks || 0,
        FranchiseID: this.subscription.FranchiseID || 0,
        NextDelivery: moment(this.subscription.NextDelivery).format('YYYY-MM-DDT00:00:00') ,        
        Active: this.subscription.Active || false,
        PaymentExpired: this.subscription.PaymentExpired || false,
        OnHold: this.subscription.OnHold || false,
        StartDate: this.subscription.StartDate || Date.now(),
        EndDate: this.subscription.EndDate || null,
        ZipCode: this.subscription.ZipCode || '',
      });
    });
  }

我的 HTML 代码如下：

<div class="form-group row">
                            <label for="NextDelivery"
                                   class="col-sm-3 control-label font-weight-bold mt-1">NextDelivery</label>
                            <div class="col-sm-9">
                                <input type="text" formControlName="NextDelivery" class="form-control"
                                       id="NextDelivery" matInput [matDatepicker]="picker"/>
                                       <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                       <mat-datepicker #picker></mat-datepicker>
                            </div>
                        </div>

当我检查控制台时，它的显示完美：2025-06-19T00:00:00 但在输入文本框中显示日期为 6/19/2025

【问题讨论】：

标签： angular angular-material momentjs

【解决方案1】：

好的，所以添加这个

import {MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material';

export const MY_FORMATS = {
  parse: {
    dateInput: 'LL',
  },
  display: {
    dateInput: 'YYYY-MM-DDT00:00:00',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'LL',
    monthYearA11yLabel: 'YYYY',
  },
};

如果您的项目中没有material-moment-adapter 或moment，您需要安装这些节点包。

【讨论】：