Datepicker localization issue for Asian languages

[guisaas]

Bug description:

For Asian languages (Japanese, Chinese, etc), the year is positioned at the beginning when formatting a date. However, it is not the case when using the ng-bootstrap datepicker with navigation equals to arrows mode (in Chinese for example: 十月 2020 whereas a proper localization should be 2020年 10月). Furthermore, it is not even possible to correct it using the NgbDatepickerI18n as the order is "hardcoded":

<ng-template *ngIf="!showSelect" ngFor let-month [ngForOf]="months" let-i="index">
      <div class="ngb-dp-arrow" *ngIf="i > 0"></div>
      <div class="ngb-dp-month-name">
        {{ i18n.getMonthFullName(month.number, month.year) }} {{ i18n.getYearNumerals(month.year) }}
      </div>
      <div class="ngb-dp-arrow" *ngIf="i !== months.length - 1"></div>
</ng-template>

https://github.com/ng-bootstrap/ng-bootstrap/blob/master/src/datepicker/datepicker-navigation.ts#L27-L33

The only way that we have currently it is to use https://ng-bootstrap.github.io/#/components/datepicker/overview#content-template and redoing on our own a part of the datepicker.

Link to minimally-working StackBlitz that reproduces the issue:

https://stackblitz.com/edit/angular-faf5dt?file=src%2Fapp%2Fdatepicker-basic.ts

Versions of Angular, ng-bootstrap and Bootstrap:

Angular: 10

ng-bootstrap: 7.0.0

Bootstrap: 4.5.0

[maxokorokov]

There is no simple date format to do what you want to do, but the way datepicker displays this labels (splitting it into 2 parts) is wrong.
It's not an easy fix, unfortunately, but #4023 makes it possible to override the full month label "properly":

// ex. custom datepicker i18n service that overrides the label
@Injectable()
class CustomI18n extends NgbDatepickerI18nDefault {
  getMonthLabel(date: NgbDateStruct): string { return `${date.month}-${date.year}`; }
}

In your case for asian languages it would be a bit more tricky, something along these lines:

import {Inject, Injectable, LOCALE_ID} from '@angular/core';
import {NgbDateNativeAdapter, NgbDatepickerI18nDefault, NgbDateStruct} from '@ng-bootstrap/ng-bootstrap';
import {formatDate} from '@angular/common';

@Injectable()
class CustomI18N extends NgbDatepickerI18nDefault {
  constructor(@Inject(LOCALE_ID) private locale: string, private dateAdapter: NgbDateNativeAdapter) {
    super(locale);
  }

  // overriding labels for some locales
  getMonthLabel(date: NgbDateStruct): string {
    if (this.locale === 'zh-CN') {
      return `${date.year}年 ${formatDate(this.dateAdapter.toModel(date) !, 'MMM', this.locale)}`;
    } else {
      return super.getMonthLabel(date);
    }
  }
}

Will be released as part of 9.1.0