Материал Angular 6 DatePicker анализирует мою дату за 1 день до

Что-то действительно странное происходит с текущей версией материала Angular DatePicker, после того, как я обновил его с A5 до A6, он начал анализировать мою дату за 1 день до этого, пример здесь: https://stackblitz.com/edit/angular6-datepicker-parsing-wrong-date

Я использую исходный пример документации с небольшим изменением языка на мой родной язык и применяю настраиваемое значение даты к ngModel, чтобы он мог анализировать.

Но вы можете проверить код здесь:

import {Component} from '@angular/core';
import {MAT_MOMENT_DATE_FORMATS, MomentDateAdapter} from '@angular/material-moment-adapter';
import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';

@Component({
  selector: 'datepicker-locale-example',
  templateUrl: 'datepicker-locale-example.html',
  styleUrls: ['datepicker-locale-example.css'],
  providers: [
    {provide: MAT_DATE_LOCALE, useValue: 'pt'}, //my change from the original documentation example
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE]},
    {provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS},
  ],
})
export class DatepickerLocaleExample {
  constructor(private adapter: DateAdapter<any>) {}

  private someDate = '2018-01-31'; //my change from the original documentation example

  french() {
    this.adapter.setLocale('fr');
  }
}

HTML:

<mat-form-field>
  <input matInput [matDatepicker] = "myDatePicker" placeholder = "Different locale" [(ngModel)] = "someDate"> <!-- my change from the original documentation example -->
  <mat-datepicker-toggle matSuffix [for] = "myDatePicker"></mat-datepicker-toggle>
  <mat-datepicker #myDatePicker></mat-datepicker>
  <mat-hint>Actual Date: {{someDate}}</mat-hint>
</mat-form-field>

<button mat-button (click) = "french()">Dynamically switch to French</button>

Кто-нибудь знает, как это исправить?

вы находитесь в часовом поясе с отрицательным смещением?

Pac0 07.06.2018 16:32

Я здесь в формате UTC + 1 / UTC + 2, и у меня нет никаких проблем, поэтому я предполагаю, что это связано с локальным отображением даты, связанного с часовым журналом. i.stack.imgur.com/9FPfn.png

Pac0 07.06.2018 16:35

@ Pac0 Я нахожусь в -3ч, у меня был неправильный код, пожалуйста, обновите свой экран и скажите мне, все ли в порядке.

ErickXavier 07.06.2018 16:40

Вот что я вижу, когда запускаю приложение: i.stack.imgur.com/PDwDv.png. Когда я нажимаю "переключить на французский", ничего не меняется. Если меняю дату, то у меня это (сообщение изменено): i.stack.imgur.com/lIjwT.png. И нажатие на кнопку переключателя тоже ничего не меняет. Однако с датой проблем нет (с моей стороны)

Pac0 07.06.2018 16:51

Также протестировал stackblitz, с моей стороны никаких проблем.

penleychan 07.06.2018 16:59

@ Pac0 и penleychan, так что мы можем согласиться, это проблема локали, верно? Теперь, как это решить?

ErickXavier 07.06.2018 18:36

@ErickXavier, не могли бы вы сделать скриншоты (и / или сделать какой-нибудь вывод в консоли и скопировать его в свой вопрос) точной проблемы, с которой вы столкнулись? На данный момент я не уверен, что действительно понимаю, с чем вы сталкиваетесь

Pac0 07.06.2018 21:45

Я бы назвал это в основном проблемой часовой пояс и зависимым от клиента отображением, которая связана с локалью, но я не думаю, что часовой пояс является частью того, что программы подразумевают под «локалью».

Pac0 07.06.2018 21:45

Да, ребята, это проблема с часовым поясом. Чтобы исправить это, мне пришлось объединить T00: 00: 00 в моей строке, но я работаю с ребятами из серверной части, чтобы посмотреть, можем ли мы изменить тип столбца в базе данных, чтобы принять гггг / ММ / ддТЧЧ: мм: сс вместо только гггг / ММ / дд

ErickXavier 13.06.2018 16:31
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
13
9
10 700
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Итак, после небольшого исследования я обнаружил, что это проблема часового пояса. Чтобы временно исправить это, мне пришлось объединить T00: 00: 00 с концом моей даты, которая поступала из бэкэнда в формате гггг / ММ / дд.

Лучше всего, если это возможно, изменить формат на гггг / ММ / ддТЧЧ: мм: сс.

В противном случае есть 2 варианта решения проблемы, когда вам нужно использовать формат гггг / ММ / дд в вашем Angular 6 Material DatePicker: плохой и хороший.

  • Плохое (и, возможно, временное) - это сделать то, что я сделал, объединить T00: 00: 00 с концом даты до того, как DatePicker проанализирует его.
  • Лучше всего получить строку даты, преобразовать ее в дату, преобразовать часовой пояс в GMT, а затем позволить DatePicker проанализировать ее.

Я надеюсь, что смогу помочь таким отчаявшимся, как я.

В моем случае я использовал java.time.LocalDate в бэкэнде вместо java.time.LocalDateTime. Измените тип даты и решенную проблему

Tomás 27.03.2020 00:38

Для тех, кто просто хочет, чтобы их даты были датами UTC и застряли с использованием объекта JS Date через DatePicker, вы можете просто добавить параметр адаптера к поставщикам @NgModule:

@NgModule({
  imports: [MatDatepickerModule, MatMomentDateModule],
  providers: [
    { provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } }
  ]
})

Вам нужно будет добавить @angular/material-moment-adapter в ваш package.json и импортировать объект module / options:

import {MAT_MOMENT_DATE_ADAPTER_OPTIONS, MatMomentDateModule} from '@angular/material-moment-adapter';

Как только это будет сделано, любой DatePicker предоставит даты в формате UTC, и, учитывая, что нет возможности выбрать компонент времени с помощью DatePicker, это кажется подходящим.

Вытащил из Информация о материале DatePicker.

Вы можете выполнить функцию синтаксического анализа, например:

let newDate= new Date(oldDate);
newDate.setMinutes(newDate.getMinutes() + newDate.getTimezoneOffset());

return newDate;

Неплохая идея.

ErickXavier 24.05.2019 20:26

Другие вопросы по теме