web-dev-qa-db-ja.com

Angular 6リアクティブ形式の日付形式MM / dd / yyyy

私はAngular 6をリアクティブフォームで使用しています。webapiから返された日付値をフォーマットする方法を見つけようとしています。日付は1973-10-10T00：00：00として表示され、データを取得して表示するコードを次に示しますwebapi json dob値は1973-10-10T00：00：00ですモデルのdob値はDate型です。

html

<input formControlName="dob" type="text" [value]="dob | date: 'MM/dd/yyyy'" class="form-control" />

バインディングフォーム

this.userInfoForm = this.fb.group({
      'userId': ['', [Validators.required]],
      'dob': ['', [Validators.required]]
});

ローディングセーブ

this.as.accountUserInfo(this.activeRoute$.ActiveUserId).subscribe(data => {
      this.userInfoModel$ = data as UserInfoModel;
      this.userInfoForm.patchValue(this.userInfoModel$);
});

aPIコール

accountUserInfo(userId: number) {
return this.http.post(this.url + "UserInfo", userId)
.pipe(
  retry(3),
  catchError(this.handleError)
)}

日付をMM/dd/yyyy形式に変換する方法についてのヘルプやガイダンスに感謝します。 htmlを日付の値に設定すると、見た目は良くなりますが、組み込みのブラウザの日付表示を使用したくないので、文字列に変換する必要があります。

前もって感謝します。

angulardateangular-reactive-forms
7
user1041169

Datepickerを使用するときに同じ問題がありました。解決策は簡単でした。入力タイプを「日付」に変更します

前：

<input type="text" class="form-control" placeholder="dd/mm/yyyy"
            formControlName="inputNascimento" ngbDatepicker #d="ngbDatepicker">

後：

<input type="date" class="form-control" placeholder="dd/mm/yyyy"
            formControlName="inputNascimento" ngbDatepicker #d="ngbDatepicker">
4
Fernando Raposo

日付パイプ演算子はformControlNameでは機能しないため、購読するときに日付形式を変換できます。

this.as.accountUserInfo(this.activeRoute$.ActiveUserId).subscribe(data => {

      this.userInfoModel$ = data as UserInfoModel;
var datePipe=new DatePipe("en-US");

this.userInfoModel$.dob=datePipe.transform(this.userInfoModel$.dob,'MM/dd/yyyy');

      this.userInfoForm.patchValue(this.userInfoModel$);
});


<input formControlName="dob" type="text" class="form-control" />

それが役に立てば幸い！

1
Engineer

異なる日付時刻形式が必要な場合は、momentjsを使用します

Momentjsはangularすべてのバージョンで正常に動作し、異なるタイプの形式を提供します

最初に、次のようなmomentjsをインポートします。

*「モーメント」からの瞬間としてインポート;

あなたもあなたのように渡すことができる独自の形式を渡したい場合

sysdate = moment（）。format（ 'MMMM Do YYYY、h：mm a'）;

ここに以下のmomentjsリンク

momentjs

0
Vijayakumar Mural

最終的に、formControlNameに2番目の非表示入力を使用しました。

     <mat-form-field>
        <mat-label>Start Date</mat-label>
        <input type="text"
          #start
          matInput
          value="{{startDate | date: 'mediumDate'}}"
          autocomplete="off"
          placeholder="Start Date"
          attr.aria-label="Start Date"
          (keyup.enter)="changeDate(start.value, 'start')"
          (blur)="changeDate(start.value, 'start')">
      </mat-form-field>

      <input hidden formControlName="startDate">
0
Nate May

既存の値をオーバーライドするformControlNameを指定したため、値バインディングで設定されたものは重要ではありません。 DatePipeを使用して、FormGroupに設定されている日付をフォーマットできるようです： https://stackblitz.com/edit/angular-3tp7yz?file=src%2Fapp%2Fapp.component.ts =

0
SiliconSoul