web-dev-qa-db-ja.com

angularマテリアル2、日付ピッカーの日付形式「MM / DD / YYYY」を「DD / MM / YYYY」に変更

angular material 2日付ピッカーのデフォルトの日付形式MM/DD/YYYYをDD/MM /に変更しようとしました。 YYYYまたはDD.MM.YYYYまたは少なくともDD-MM-YYYY

この質問 と ドキュメント で述べたように

providers: [{provide: MD_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}]

だから次のアプローチを試みた

アプローチ 1 plunkr ：DD-MM-YYYY形式で取得する

アプローチ 2 plunkr ：DD.MM.YYYY形式で取得する

アプローチ plunkr ：DD/MM/YYYY形式で取得する

しかし、上記の各アプローチは、Date1から12を選択するまで普通に動作します

例：今日の日付は2017年9月25日、日付として12th 2017年9月を選択し、もう一度datepickerボタンをクリックすると（11/09/2017）ではなく2017年11月9日（2017/11/09）として取得されたカレンダー日付を表示できます。これはデフォルトの日付形式が正しくオーバーライドされていないようです

angulardatepickerangular-material2
18
Kelum Priyadarshane

1/DOCS： 解析および表示形式をカスタム日付アタプタでカスタマイズすることにより

カスタムの日付アダプター（お使いのAppDateAdapter）で、新しい日付形式（DD/MM/YYY）を有効な日付に解析する解析メソッドを追加します。

たとえば、DD/MM/YYYY形式の場合、解析は次のようになります。

   parse(value: any): Date | null {
    if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
      const str = value.split('/');
      const year = Number(str[2]);
      const month = Number(str[1]) - 1;
      const date = Number(str[0]);
      return new Date(year, month, date);
    }
    const timestamp = typeof value === 'number' ? value : Date.parse(value);
    return isNaN(timestamp) ? null : new Date(timestamp);
  }

動作中のstackblitz： https://stackblitz.com/edit/angular-material-datepicker-format?embed=1&file=app/date.adapter.ts

完全な日付アダプター：

export class AppDateAdapter extends NativeDateAdapter {
    parse(value: any): Date | null {
        if ((typeof value === 'string') && (value.indexOf('/') > -1)) {
          const str = value.split('/');
          const year = Number(str[2]);
          const month = Number(str[1]) - 1;
          const date = Number(str[0]);
          return new Date(year, month, date);
        }
        const timestamp = typeof value === 'number' ? value : Date.parse(value);
        return isNaN(timestamp) ? null : new Date(timestamp);
      }
   format(date: Date, displayFormat: any): string {
       if (displayFormat == "input") {
           let day = date.getDate();
           let month = date.getMonth() + 1;
           let year = date.getFullYear();
           return this._to2digit(day) + '/' + this._to2digit(month) + '/' + year;
       } else {
           return date.toDateString();
       }
   }

   private _to2digit(n: number) {
       return ('00' + n).slice(-2);
   } 
}

このアプローチの利点は、表示定数でmonthYearLabelの形式をカスタマイズでき、次のようなカレンダーを作成できることです。

enter image description here

24
Fetrarij

app.module.ts配列の下のproviders:でこれを使用します。

{provide: MAT_DATE_LOCALE, useValue: 'en-GB'}

59
Nalin Mathur

考えられる解決策の1つは、単純に独自の入力形式を定義することです。

export const DD_MM_YYYY_Format = {
    parse: {
        dateInput: 'LL',
    },
    display: {
        dateInput: 'DD/MM/YYYY',
        monthYearLabel: 'MMM YYYY',
        dateA11yLabel: 'LL',
        monthYearA11yLabel: 'MMMM YYYY',
    },
};

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [
        {provide: MAT_DATE_FORMATS, useValue: DD_MM_YYYY_Format},
    ]
})
export class AppComponent implemets OnInit {
   // ... some code
}

次のコードは、何かがDD_MM_YYYY_Formatを要求したときにMAT_DATE_FORMATSを返すようインジェクターに指示します（詳細については here を読んでください）。カスタム形式内で、プロパティdisplay.dateInputはDD/MM/YYYYに設定されます。

8
Marko

Fetrarijの更新されたバージョン、日付形式dd.mm.yyyyの最初の月曜日：

  • app.module.ts内：
 
    { provide: MAT_DATE_LOCALE, useValue: 'sk-SK' },
  • 日付アダプター拡張：
 

    @Injectable()
    export class DateAdapterSK extends NativeDateAdapter {

        getFirstDayOfWeek(): number {
            return 1;
        }

        parse(value: any): Date | null {
            if ((typeof value === 'string') && (value.indexOf('.') > -1)) {
                const str = value.split('.');
                const year = Number(str[2]);
                const month = Number(str[1]) - 1;
                const date = Number(str[0]);
                return new Date(year, month, date);
            }
            const timestamp = typeof value === 'number' ? value : Date.parse(value);
            return isNaN(timestamp) ? null : new Date(timestamp);
        }

    }

私のために働きます。 Angular 6。

0
bmi