Date picker in Html is not working as expected - html

Question

I'm working on a requirement where date picker is displayed based on min and max dates when minimum and maximum are provided. But the format shows as attached enter image description here
Requirement is enter image description here
Below is the code snippet i have added HTML and TS.
<mat-form-field>
<input matInput type="date" [min]="todayDate [max]="maxReleaseDate" name='spoDate'
#spoDate="ngModel" [(ngModel)]="newSpoDate" autocomplete="off" required
[disabled]="spoPoCreateDate">
<mat-error *ngIf="spoDate && spoDate.untouched && spoDate.invalid">This is required field
</mat-error>
</mat-form-field>
import { Component, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { DatePipe } from '#angular/common';
import { Order } from 'app/general-component/models/order';
import { GetService } from 'app/general-component/services/get.service';
import { PostService } from 'app/general-component/services/post.service';
import { environment } from 'environments/environment.prod';
#Component({
selector: 'app-spo-date-popup',
templateUrl: './spo-date-popup.component.html',
styleUrls: ['./spo-date-popup.component.css']
})
export class SpoDatePopupComponent implements OnInit {
currentSpoDate: any;
newSpoDate: any
orderId: any;
selectedOrganization: any;
itemId: any;
orderData: Order;
todayDate: any;
spoCreatePoDateNote: any;
maxReleaseDate: any
orderLineId: any;
currentOrderId: any;
loggedInUser: string;
userGrantList: any;
spoPoCreateDate: boolean;
constructor(private route: ActivatedRoute, private getService: GetService, private postService: PostService, private datePipe: DatePipe) { }
ngOnInit(): void {
let date = this.datePipe.transform(new Date(), 'dd/MM/yyyy');
this.todayDate = (date as string).split('/').reverse().join('-');
this.route.queryParams.subscribe(
(params) => {
this.orderId = params["orderId"];
this.selectedOrganization = params["selectedOrganization"];
this.itemId = params["ItemId"];
this.orderLineId = params["OrderLineId"];
this.currentOrderId = params["OrderId"];
this.loggedInUser = params["loggedInUser"]
},
(error) => console.log("error" + error)
)
this.grantCheck();
this.getService.getData(environment.getOrderByIdURL + this.currentOrderId, this.selectedOrganization).subscribe(res => {
this.orderData = res as Order;
if (this.orderData) {
this.orderData.OrderLine.forEach((e) => {
if (this.orderLineId === e.OrderLineId) {
this.currentSpoDate = e.Extended.PODropDate ? e.Extended.PODropDate : "";
this.maxReleaseDate = e.Extended.ReleaseDate ? this.datePipe.transform(new Date(e.Extended.ReleaseDate), 'yyy-MM-dd') : "";
console.log("SPOPODATEPOPUP :: ", this.maxReleaseDate);
}
})
}
});
let configData = {};
this.getService.getData(`${environment.configStoreURL}/REST_EX01`, this.selectedOrganization).subscribe((res) => {
let REST_EX01_CONFIG = res.ConfigStoreData;
if (res.ConfigStoreData) {
let list = REST_EX01_CONFIG.split(';');
list.forEach(e => {
let ex01Configs = e.split('=');
configData = {
...configData,
[ex01Configs[0]]: ex01Configs[1]
}
})
// #ts-ignore
this.spoCreatePoDateNote = configData.SPOPOCreateDateUpdateNote;
}
})
}
updateDate(res: any) {
console.log(res);
if (res && res.spoDate) {
if (this.orderData && this.orderData.OrderLine) {
let orderLineData = this.orderData.OrderLine.find((i) => i.OrderLineId === this.orderLineId);
let isAllOLSame = this.orderData.OrderLine.every((e) =>
e.OrderLinePromisingInfo && e.FulfillmentGroupId &&
e.FulfillmentGroupId === orderLineData.FulfillmentGroupId &&
e.OrderLinePromisingInfo.ShipFromLocationId === orderLineData.OrderLinePromisingInfo.ShipFromLocationId);
this.orderData.OrderLine.forEach((e) => {
if (this.orderLineId === e.OrderLineId) {
e.Extended.PODropDate = this.datePipe.transform(res.spoDate, 'MM/dd/yyy');
e.Extended.SPOPOCreateDateUpdated = true;
} else {
e.Extended.PODropDate = e.Extended.PODropDate;
e.Extended.SPOPOCreateDateUpdated = e.Extended.SPOPOCreateDateUpdated;
}
if (isAllOLSame) {
e.Extended.PODropDate = this.datePipe.transform(res.spoDate, 'MM/dd/yyy');
e.Extended.SPOPOCreateDateUpdated = true;
}
})
this.currentSpoDate = this.datePipe.transform(res.spoDate, 'MM/dd/yyy');
this.saveOrder(this.orderData)
}
}
// Extended.SPOPOCreateDateUpdated is flipped to true on updating
}
saveOrder(order: any) {
// let saveOrder: any;
// let postURL = environment.post_order_save;
// saveOrder = this.postService.postData(postURL, this.selectedOrganization, order);
this.postService.postData(environment.post_order_save, this.selectedOrganization, order)
.switchMap((res) => {
let data = {}
return this.postService.postData(environment.rhFetaFocURL, this.selectedOrganization, data)
})
.subscribe(response => {
},
error => { throw error; }
);
}
grantCheck() {
this.getService.getData(environment.getUserGrant + this.loggedInUser, this.selectedOrganization).subscribe(response => {
this.userGrantList = response;
let spoPoCreateDateGrant = this.userGrantList.some((res) => {
return res.ResourceId === "SPOPOCreateDateUpdate";
})
if (!spoPoCreateDateGrant) {
this.spoPoCreateDate = true;
} else {
this.spoPoCreateDate = false
}
console.log('SPOPOCREATEDATE', this.spoPoCreateDate);
});
}
}
can anyone suggest how to fix?

Answer 1

This is might solve your problem
<input type="date" value="2022-02-03" min="2022-02-03" max="2022-03-03">