@prolina

Редактирование даты moment.js?

Я использую ангуляр материал дейтпикер в своей приложении. Для форматирования даты у меня есть необходимость переписать функционал NativeDateAdapter. Вывод в поле должен быть MM/DD/YYYY. В датапикере есть маска и возможность ручного ввода. Все работает хорошо, но если отредактировать дату к примеру: 11/05/1111 (5 ноября 1111 года) в середине, то есть вместо 5го числа сделать 6го число, то дата отобразится так: 11/06/0111. Хотелось бы чтобы в данной случае дата была 11/06/1111. Стоит отметить, что при последующем редактировании - все хорошо (если уже отредактировать дату 11/06/0111).

export class AppDateAdapter extends NativeDateAdapter {

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

		if (displayFormat === 'input') {
			let d = _moment(date).format('MM/DD/YYYY');
			return formatDate(d, 'MM/dd/yyyy', 'en-US');
			// const year: number = date.getFullYear();
			// const month: string = `${date.getMonth() + 1}`.padStart(2, '0');
			// const day: string = `${date.getDate()}`.padStart(2, '0');
			// return `${month}/${day}/${year}`;
		}
		return date.toDateString();
	}

	public parse(value: any): Date | null {
		const date: Moment = _moment(value, 'MM/DD/YYYY');
		return date.isValid() ? date.toDate() : null;
	}
}


export const PICK_FORMATS = {
	parse: {
		dateInput: 'MM/DD/YYYY',
	},
	display: {
		dateInput: 'input',
		monthYearLabel: 'MMMM YYYY',
		dateA11yLabel: 'LL',
		monthYearA11yLabel: 'MMMM YYYY',
	},
};

providers: [
		{
			provide: DateAdapter, useClass: AppDateAdapter,
		},
		{
			provide: MAT_DATE_FORMATS, useValue: PICK_FORMATS,
		},
]

mask directive:
private maskedInputController: any;
	constructor(private element: ElementRef) {
		this.maskedInputController = textMask.maskInput({
			inputElement: this.element.nativeElement,
			mask: [
				new RegExp('\\d'),
				new RegExp('\\d'),
				'/',
				new RegExp('\\d'),
				new RegExp('\\d'),
				'/',
				new RegExp('\\d'),
				new RegExp('\\d'),
				new RegExp('\\d'),
				new RegExp('\\d'),
			],
			showMask: true,
			guide: false,
		});
	}
  • Вопрос задан
  • 26 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы