角度のある素材2 - 日付ピッカーの日付形式を変更する（ボタン上）

Question

重要な日付ピッカーの形式をMM/DD/YYからDD/MM/YYに変更しました。

私は

export class AppDateAdapter 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); 
    } 

    format(date: Date, displayFormat: Object): 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); 
    } 

} 

export const APP_DATE_FORMATS = { 
    parse: { 
     dateInput: { month: "short", year: "numeric", day: "numeric" } 
    }, 
    display: { 
     dateInput: "input", 
     monthYearLabel: { month: "short", year: "numeric", day: "numeric" }, 
     dateA11yLabel: { year: "numeric", month: "long", day: "numeric" }, 
     monthYearA11yLabel: { year: "numeric", month: "long" } 
    } 
} 

app.module.tsこの構文を使用して、私の母国日付アダプタを拡張することによってこれをしなかった：

// material datepicker 
    { 
     provide: MAT_DATE_LOCALE, useValue: "nl-be" 
    }, 
    { 
     provide: DateAdapter, useClass: AppDateAdapter 
    }, 
    { 
     provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS 
    } 

しかし、私はまた変更する（私のボタンの内容を変更月）。 それは次のようになります。

がありますとにかく私は「2017年11月」を表示するTISのボタンを変更できますか？

Answer 1

このラベルの場合、monthYearLabelフォーマットが責任を負います。 displayFormatの 'input'を処理しています。他の人はちょうどdate.toDateString()を返します。

私はこのラベルを処理するためにこれを行っています。

export const APP_DATE_FORMATS = { 
    parse: { 
    dateInput: {month: 'short', year: 'numeric', day: 'numeric'}, 
    }, 
    display: { 
    dateInput: 'input', 
    monthYearLabel: {year: 'numeric', month: 'short', order: ['month', ' ', 'year']}, 
    dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'}, 
    monthYearA11yLabel: {year: 'numeric', month: 'long'}, 
    } 
}; 

const APP_DATE_MONTH_FORMAT = [{ 
    short: 'Jan', 
    long: 'Januar' 
}, { 
    short: 'Feb', 
    long: 'Februar' 
}, { 
    short: 'Mär', 
    long: 'März' 
}, { 
    short: 'Apr', 
    long: 'April' 
}, { 
    short: 'Mai', 
    long: 'Mai' 
}, { 
    short: 'Jun', 
    long: 'Juni' 
}, { 
    short: 'Jul', 
    long: 'July' 
}, { 
    short: 'Aug', 
    long: 'August' 
}, { 
    short: 'Sep', 
    long: 'September' 
}, { 
    short: 'Okt', 
    long: 'Oktober' 
}, { 
    short: 'Nov', 
    long: 'November' 
}, { 
    short: 'Dez', 
    long: 'Dezember' 
}]; 

class DateTargets { 

    day?: string | number; 
    month?: string | number; 
    year?: number; 

    build(order?: Array<string>): string { 

    const targets = []; 

    if (order) { 

     order.forEach((target) => { 
     targets.push(this[target] ? this[target] : target); 
     }); 

     return targets.join(''); 

    } else { 

     if (this.day) targets.push(this.day); 
     if (this.month) targets.push(this.month); 
     if (this.year) targets.push(this.year); 

     return targets.join('.'); 

    } 

    } 

} 

export class AppDateAdapter extends NativeDateAdapter { 

    format(date: Date, displayFormat: Object): string { 

    if (displayFormat === 'input') { 

     const day = date.getDate(); 
     const month = date.getMonth() + 1; 
     const year = date.getFullYear(); 

     return `${day.pad()}.${month.pad()}.${year}`; 

    } else { 

     const targets = new DateTargets(); 

     if (displayFormat['day'] === 'numeric') { 
     targets.day = date.getDate(); 
     } 

     if (displayFormat['month'] === 'numeric') { 
     targets.month = date.getMonth() + 1; 
     } else if (displayFormat['month'] === 'short') { 
     targets.month = APP_DATE_MONTH_FORMAT[date.getMonth()].short; 
     } else if (displayFormat['month'] === 'long') { 
     targets.month = APP_DATE_MONTH_FORMAT[date.getMonth()].long; 
     } 

     if (displayFormat['year'] === 'numeric') { 
     targets.year = date.getFullYear(); 
     } 

     return targets.build(displayFormat['order']); 

    } 

    } 

}