Что-то действительно странное происходит с текущей версией материала 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>
Кто-нибудь знает, как это исправить?
Я здесь в формате UTC + 1 / UTC + 2, и у меня нет никаких проблем, поэтому я предполагаю, что это связано с локальным отображением даты, связанного с часовым журналом. i.stack.imgur.com/9FPfn.png
@ Pac0 Я нахожусь в -3ч, у меня был неправильный код, пожалуйста, обновите свой экран и скажите мне, все ли в порядке.
Вот что я вижу, когда запускаю приложение: i.stack.imgur.com/PDwDv.png. Когда я нажимаю "переключить на французский", ничего не меняется. Если меняю дату, то у меня это (сообщение изменено): i.stack.imgur.com/lIjwT.png. И нажатие на кнопку переключателя тоже ничего не меняет. Однако с датой проблем нет (с моей стороны)
Также протестировал stackblitz, с моей стороны никаких проблем.
@ Pac0 и penleychan, так что мы можем согласиться, это проблема локали, верно? Теперь, как это решить?
@ErickXavier, не могли бы вы сделать скриншоты (и / или сделать какой-нибудь вывод в консоли и скопировать его в свой вопрос) точной проблемы, с которой вы столкнулись? На данный момент я не уверен, что действительно понимаю, с чем вы сталкиваетесь
Я бы назвал это в основном проблемой часовой пояс и зависимым от клиента отображением, которая связана с локалью, но я не думаю, что часовой пояс является частью того, что программы подразумевают под «локалью».
Да, ребята, это проблема с часовым поясом. Чтобы исправить это, мне пришлось объединить T00: 00: 00 в моей строке, но я работаю с ребятами из серверной части, чтобы посмотреть, можем ли мы изменить тип столбца в базе данных, чтобы принять гггг / ММ / ддТЧЧ: мм: сс вместо только гггг / ММ / дд





Итак, после небольшого исследования я обнаружил, что это проблема часового пояса. Чтобы временно исправить это, мне пришлось объединить T00: 00: 00 с концом моей даты, которая поступала из бэкэнда в формате гггг / ММ / дд.
Лучше всего, если это возможно, изменить формат на гггг / ММ / ддТЧЧ: мм: сс.
В противном случае есть 2 варианта решения проблемы, когда вам нужно использовать формат гггг / ММ / дд в вашем Angular 6 Material DatePicker: плохой и хороший.
Я надеюсь, что смогу помочь таким отчаявшимся, как я.
В моем случае я использовал java.time.LocalDate в бэкэнде вместо java.time.LocalDateTime. Измените тип даты и решенную проблему
Для тех, кто просто хочет, чтобы их даты были датами 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;
Неплохая идея.
вы находитесь в часовом поясе с отрицательным смещением?