Значение даты изменяется при отправке с углового и получении на сервере ASP.NET

Question

Я отправляю объект, содержащий две даты из Angular 6, в метод ASP.NET Core Web API.Даты являются правильными на стороне Angular, но когда они получены в методе Web API, они на один день отстают от того, что они отправили из приложения Angular.

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

Приведенный выше метод отправляет объект даты в метод Web API.Приведенный ниже метод представляет собой метод веб-API, который получает этот объект, но когда я отлаживаю и наведите курсор на объект sprintDatesDto, полученные значения на один день отстают от того, что они были при отправке из Angular.

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

Это класс SprintDatesDto:

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

Это объект, который я создал в угловом файле Typescript:

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

Затем, в HTML-файле, я использовал ngModel дляпривязка к свойствам объекта sprintDates:

<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

Проблема заключается в том, что Json анализирует вашу дату, и по умолчанию в угловых значениях она добавляет местное время по сравнению с UTC (пример: если у вас Gmt + 1 в полночь, она преобразуется в 11 вечера вчерашнего UTC)все, что вам нужно сделать, это создать файл, который перезапишет MomentDateAdapter, чтобы игнорировать это преобразование, и создать выбранное время в UTC следующим образом:

import { Inject, Injectable, Optional } from '@angular/core';
import { MAT_DATE_LOCALE } from '@angular/material';
import { MomentDateAdapter } from '@angular/material-moment-adapter';
import { Moment } from 'moment';
import * as moment from 'moment';

@Injectable()
export class MomentUtcDateAdapter extends MomentDateAdapter {
  constructor(@Optional() @Inject(MAT_DATE_LOCALE) dateLocale: string) {
    super(dateLocale);
  }

  createDate(year: number, month: number, date: number): Moment {
    // Moment.js will create an invalid date if any of the components are out of bounds, but we
    // explicitly check each case so we can throw more descriptive errors.
    if (month < 0 || month > 11) {
      throw Error(
        `Invalid month index "${month}". Month index has to be between 0 and 11.`
      );
    }

    if (date < 1) {
      throw Error(`Invalid date "${date}". Date has to be greater than 0.`);
    }

    const result = moment.utc({ year, month, date }).locale(this.locale);

    // If the result isn't valid, the date must have been out of bounds for this month.
    if (!result.isValid()) {
      throw Error(`Invalid date "${date}" for month with index "${month}".`);
    }

    return result;
  }
}

Затем просто импортируйте следующего поставщика и этот новый файл вимпортирует в ваш app.module или угловой модуль материала, если у вас есть один

@NgModule({
  providers: [
    { provide: MAT_DATE_LOCALE, useValue: 'en-GB' },
      { provide: MAT_DATE_FORMATS, useValue: MAT_MOMENT_DATE_FORMATS },
      { provide: DateAdapter, useClass: MomentUtcDateAdapter },
  ],
  imports: [
   MomentUtcDateAdapter,
   ... rest of your imports]