Date value changes when sent from angular and received in ASP.NET server

Question

I am sending an object containing two dates from Angular 6 to a ASP.NET Core Web API method. The dates are correct on the Angular side, but when they are received in the Web API method, they are one day behind from what they were went being sent from the Angular application.

startSprint(id: number, SprintDates: any): Observable<any> {
    this.sprintId = id.toString();
    return this.http.patch<any>(this.baseUrl + 'setSprintDates/' + this.sprintId,
                                SprintDates);
}

The above method sends dates object to the Web API method. The method below is the Web API method that receives that object, but when I debug and hover the cursor over the sprintDatesDto object, the values received are one day behind what they were when sent from Angular.

[HttpPatch("setSprintDates/{sprintId}")]
public async Task<IActionResult> SetSprintDates(string sprintId, SprintDatesDto sprintDatesDto)
{
    // Business login related code
    return StatusCode(200);
}

This is the SprintDatesDto class:

namespace AgileFootPrints.API.Dtos
{
    public class SprintDatesDto
    {
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
    }
}

This is the object i created in angular Typescript file:

sprinDates = {
startDate: Date,
endDate: Date
  };

Then below, in Html file i have used ngModel to bind to sprintDates object properties:

<div class="row">
  <div class="col-md-7 w-100 ">
<mat-form-field class="example-full-width">
  <input
    matInput
    [(ngModel)]="sprinDates.startDate"
    [min]="minDate"
    [max]="maxDate"
    [matDatepicker]="startsAt"
    placeholder="Starts At"
  />
  <mat-datepicker-toggle matSuffix [for]="startsAt"></mat-datepicker-toggle>
  <mat-datepicker #startsAt></mat-datepicker>
</mat-form-field>
  </div>
  <br />
</div>
<div class="row">
  <div class="col-md-7 w-100">
<mat-form-field class="example-full-width">
  <input
    [disabled]="sprinDates.startDate === undefined"
    matInput
    [(ngModel)]="sprinDates.endDate"
    [min]="sprinDates.startDate"
    [max]="maxDate"
    [matDatepicker]="endsAt"
    placeholder="Ends At"
  />
  <mat-datepicker-toggle matSuffix [for]="endsAt"></mat-datepicker-toggle>
  <mat-datepicker #endsAt></mat-datepicker>
</mat-form-field>
  </div>
</div>

Answer 1

A likely culprit is the time zone offset between the client and the server.

When JavaScript dates are sent via the Angular HTTP Client, the data is converted to a JSON string using the JSON.stingify() method. When the date is converted to this string, the numerical time value is actually modified to reflect no timezone offset, instead of the timezone offset of the client. This is to normalize actual time in case the server is in a different timezone.

To resolve this issue you need to convert datetime to a string format that the server can interpret. For this there are two approaches. You can use the DatePipe from angular or you can simply convert the date to a string using the Date functions available.

import { DatePipe } from '@angular/common';

In constructor:

private datePipe: DatePipe

Convert to whichever date time format you need.

this.sprinDates.StartDate = this.datePipe.transform(this.sprinDates.StartDate, 'MM/dd/yyyy');

The other approach like I mentioned is to convert using date functions.

this.sprinDates.StartDate = this.sprinDates.StartDate ? this.sprinDates.StartDate.toLocaleString() : null;