CODEWITHSUNDEEP
angularangular8angular-reactive-formsdatetime-format
Mohit Harshan
Mohit Harshan

Reputation: 1986

Change time format in datetime picker input reactive forms

I am using ngx-mat-datetime-picker for date time input using angular reactive forms .

My form input :

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

Right now im using meridian time input , I am choosing the time with AM, PM inputs but when it displays in the forms view , it shows the time in 24Hr format . I want to show the time in 12 hour format in the form after selection .I have tried using pipe transform to transform the input .But its not working as of now ..

In the forms value changes function ,

 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();
    });
  }

The value is printing correctly, but doesn't reflect in the view

Upvotes: 2

Views: 5198

Answers (1)

Steven Echavarria
Steven Echavarria

Reputation: 46

I had the same problem for a while and I found this solution for my datetime control, maybe it's not perfect but it's working:

For your case use only the time format:

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

html code:

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

component code:

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();
   }); 
}

Regards,

Upvotes: 3

Related Questions