web-dev-qa-db-ja.com

angular 4の入力type = "date"の出力日付形式を変更する方法

実際、私はangular 4アプリケーションで作業しています。日付をdd/mm/yyyyとしてサーバーに送信する必要があるようなシナリオを持っています。

入力タイプ= "date"としてプロパティを使用しています。ただし、このプロパティはyyyy/mm/ddのような値を返します。日付の出力形式を変更するにはどうすればよいですか。

Students.html

<input type="date" [(ngModel)]="Students.dob" name="Students.dob">

日付を選択した後、console.log（）で確認します。

Students.components.ts

checkDate() { console.log(Students.dob); }

最後に、出力はyyyy/mm/dd。でした。

この問題を克服する方法はありますか？親切に教えてください。

angularangular4-forms
5
Vignesh Mohanraj

checkDate()内のDatePipeを使用して、日付をdd/mm/yyyy形式に変更できます。関数。以下のように。そして、その日付をサーバー側に送信します。

最初にDatePipeをコンポーネントにインポートします

import { DatePipe } from '@angular/common';

以下のように使用します

  checkDate() {
    const dateSendingToServer = new DatePipe('en-US').transform(this.Students.dob, 'dd/MM/yyyy')
    console.log(dateSendingToServer);
  }

ここで見つけることができる作業例 STACKBLITZ DEMO。

これがあなたに役立つことを願っています！

3
coder

これを試すことができます-

import { DatePipe } from '@angular/common';

checkDate() {
    let formatedDate = new DatePipe().transform(this.Students.dob, 'dd/mm/yyyy')
    console.log(formatedDate); 
  }
2
Pardeep Jain