I am trying to use Material DatePicker with Moment for date formatting while using reactive forms.
Here is the code where I set the value for NextDeliverDate in the .ts file:
loadData() {
this.getSubscriptionData().subscribe((x) => {
this.subscription = x;
console.log(moment(this.subscription.NextDelivery).format('YYYY-MM-DDT00:00:00'));
this.subscriptionForm.setValue({
ID: this.subscription.ID || '',
CustomerID: this.subscription.CustomerID || '',
CustomerUserName: this.subscription.CustomerUserName || '',
CustomerFirstName: this.subscription.CustomerFirstName || '',
CustomerLastName: this.subscription.CustomerLastName || '',
AddressID: this.subscription.AddressID || '',
OrderID: this.subscription.OrderID || '',
PaymentID: this.subscription.PaymentID || '',
ProductID: this.subscription.ProductID || '',
Quantity: this.subscription.Quantity || 0,
Price: this.subscription.Price || 0,
Total: this.subscription.Total || 0,
FrequencyWeeks: this.subscription.FrequencyWeeks || 0,
FranchiseID: this.subscription.FranchiseID || 0,
NextDelivery: moment(this.subscription.NextDelivery).format('YYYY-MM-DDT00:00:00') ,
Active: this.subscription.Active || false,
PaymentExpired: this.subscription.PaymentExpired || false,
OnHold: this.subscription.OnHold || false,
StartDate: this.subscription.StartDate || Date.now(),
EndDate: this.subscription.EndDate || null,
ZipCode: this.subscription.ZipCode || '',
});
});
}
And here is the HTML code:
<div class="form-group row">
<label for="NextDelivery"
class="col-sm-3 control-label font-weight-bold mt-1">NextDelivery</label>
<div class="col-sm-9">
<input type="text" formControlName="NextDelivery" class="form-control"
id="NextDelivery" matInput [matDatepicker]="picker"/>
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</div>
</div>
When I check the console, it shows the date as: 2025-06-19T00:00:00. However, in the input text box, it displays the date as: 6/19/2025.