Date picker in Html is not working as expected

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">