Angular материал 2, изменить датуpicker Формат даты "MM/DD/YYYY" на "DD/MM/YYYY" странное поведение

Я просто попытался изменить angular материал 2 даты-выборщик по умолчанию Формат даты ММ/ДД/ГГГГ на 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

Подход 3 plunkr: войти в формат DD/MM/YYYY

но каждый из них подходит к обычной, пока я не выберем Дата от 1 до 12,

для ex: Сегодня дата 25 сентября 2017 года, если я выбрал 12 сентября 2017 года как дату, а затем снова нажмите кнопку datepicker, я могу увидеть дату календаря, взятую как 09 ноября 2017 года (09/11/2017) не так (11/09/2017), который, как представляется, формат даты по умолчанию не переопределяется правильно

ОТВЕТЫ

Ответ 1

1/DOCS: сочетая синтаксический анализ и формат отображения с пользовательским указателем даты

В пользовательском адаптере даты (например, AppDateAdapter) добавьте метод синтаксического анализа, чтобы проанализировать новый формат даты (ДД/ММ/ГГГГ) для даты, действительной:

например, для формата 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);
  }

рабочий стек стека: 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

Ответ 2

Используйте это в вашем app.module.ts в массиве providers:

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

Ответ 3

Одним из возможных решений является просто определение собственного формата ввода:

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 (подробнее см. здесь). Внутри вашего пользовательского формата свойство display.dateInput установлено на DD/MM/YYYY.

Ответ 4

Обновленная версия 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);
        }

    }

Работа для меня. Угловой 6.

Ответ 5

Используйте его в разделе поставщиков вашего модуля

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