Angular date pipe giving incorrect date for the date's "12/29/2024", "12/30/2024" and...

##App.Component.ts##

import { Component } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import {DateTime} from 'luxon';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'my-app3';

myDate1:any='12/28/2024';
myDate2:any='12/29/2024';
myDate3:any='12/30/2024';
myDate4:any='12/31/2024';
myDate5:any='01/01/2025';
}


##App.component.html##

<p>Date1: {{ myDate1 | date: 'MM/dd/YYYY' }}</p>
<p>Date2: {{ myDate2 | date: 'MM/dd/YYYY' }}</p>
<p>Date3: {{ myDate3 | date: 'MM/dd/YYYY' }}</p>
<p>Date4: {{ myDate4 | date: 'MM/dd/YYYY' }}</p>
<p>Date5: {{ myDate5 | date: 'MM/dd/YYYY' }}</p>


##Output##

Date1: 12/28/2024

Date2: 12/29/2025

Date3: 12/30/2025

Date4: 12/31/2025

Date5: 01/01/2025


The Date2, Date3 and Date4 are displayed next year date. If we replace YYYY with yyyy, it displays the correct date. Do we have any other way to fix this issue.

Continue reading...