在日期时间选择器输入反应形式中更改时间格式答案

【问题标题】：Change time format in datetime picker input reactive forms在日期时间选择器输入反应形式中更改时间格式
【发布时间】：2020-09-21 20:08:18
【问题描述】：

我正在使用 ngx-mat-datetime-picker 使用角度反应形式进行日期时间输入。

我的表单输入：

 <mat-form-field (click)="picker.open()" fxFlex="50%" fxFlex.lt-md="50%" fxFlex.lt-sm="50%">
          <input matInput placeholder="{{ 'START TIME' | translate }}" [min]="today" [ngxMatDatetimePicker]="picker" formControlName="startTime">
          <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
          <ngx-mat-datetime-picker enableMeridian="true" touchUi="true" [showSeconds]="showSeconds"  #picker></ngx-mat-datetime-picker>
          <mat-error *ngIf="addForm.get('startTime').invalid && (addForm.get('startTime').dirty || addForm.get('startTime').touched)" class="alert alert-danger">
            <mat-error *ngIf="addForm.get('startTime').errors.required">
              {{'THIS FIELD IS REQUIRED'|translate}}
            </mat-error>
          </mat-error>
        </mat-form-field>

现在我使用子午线时间输入，我选择 AM、PM 输入的时间，但是当它显示在表单视图中时，它以 24 小时格式显示时间。我想在选择后以 12 小时格式显示时间。我尝试使用管道转换来转换输入。但它现在不起作用..

表单中的值变化功能，

 this.addForm.valueChanges.subscribe((value: any) => {
      if (value.startTime) {
        this.addForm.patchValue(
          {
            startTime: this.timeTransform.transform(value.startTime),
          },
          {
            emitEvent: false,
          }
        );
        console.log("value is", this.addForm.get('startTime').value);
      }
      this.changeDetector.detectChanges();
    });
  }

该值打印正确，但未反映在视图中

【问题讨论】：

你能告诉我你目前的胆量吗？
在我将其更改为今天下午 5 点之后@upinderkumar。将表单值设置为转换后，它不会在表单上显示任何内容
在放置 trasnform 之前显示为今天的日期和当前时间

标签： angular angular8 angular-reactive-forms datetime-format

【解决方案1】：

我有一段时间遇到同样的问题，我为我的日期时间控制找到了这个解决方案，也许它并不完美，但它正在工作：

对于您的情况，请仅使用时间格式：

this.myForm.get('date').value.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })

html代码：

<input class="input-calendar" nz-input placeholder="Choose a date" formControlName="publish" [min]="minDate" [max]="maxDate">
<input formControlName="date" [ngxMatDatetimePicker]="picker" style="visibility: hidden; width: 1px;">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
            <ngx-mat-datetime-picker #picker [showSpinners]="true" 
                [showSeconds]="false" [stepHour]="1"
                [stepMinute]="1" [stepSecond]="1" [touchUi]="false" [color]="color" 
                [enableMeridian]="true"
                [disableMinute]="false" [hideTime]="false">
            </ngx-mat-datetime-picker>

组件代码：

ngAfterViewChecked() {
  this.myForm.valueChanges.subscribe((value: any) => {
    if (value.date) {
      this.myForm.patchValue(
        {
          publish: this.myForm.get('date').value.toLocaleString('en-US', 
          { 
             year: 'numeric', day: '2-digit', month: '2-digit', hour: 'numeric', 
             minute: 'numeric', hour12: true })
          },
          {
           emitEvent: false,
          }
       );        
     }
     this.cd.detectChanges();
   }); 
}

问候，

【讨论】：