Angular2+ С# Web Api - серверная сторона сохраняет дату и время с неправильным временем

Я пытаюсь сохранить дату и время, но когда веб-сайт получает дату, он меняет ее на неправильный часовой пояс.

Возврат моего углового приложения: Wed May 22 2019 11:03:35 GMT+0200 Но мой веб-API возвращает: 22/05/2019 09:03:35 поэтому в моей базе данных SQL Server он сохраняется неправильно.

Я хочу, чтобы это было сохранено точно 22/05/2019 11:03:35

В моем угловом приложении у меня есть это:

myComponent.component.html

<div class="row">
  <div class="col-4" style="float:left;">
      <div class="form-group">                                
          <div class="input-group">
              <input [ngModel]="newDate | date:'dd/MM/yyyy HH:mm:ss'" 
                  (ngModelChange)="newDate=$event" 
                  name="newDate" 
                  type="datetime"
                  id="new-date"
                  class="form-control">
          </div>
      </div>                    
  </div>
</div>   
<div class="row">
    <div class="col">
        <div class="form-group">                                                                               
            <button type="submit" (click)="onSubmit()" class="btn btn-primary">Submit</button>
        </div>
    </div>            
</div>    
<br>
{{saveDate}}

myComponent.component.ts

import { Component, OnInit, ViewChild, } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit  {  
  newDate = Date.now()  
  saveDate: Date;
  ngOnInit() {    
  }

  onSubmit() {
    this.saveDate = new Date(this.newDate);    
    // call web api function
    // ...
    this.reportService.register(this.saveDate).subscribe(() => {});         
  }
}

Это пример stackblitz: https://stackblitz.com/edit/angular-uadhxa

Моя функция веб-API такова:

[ResponseType(typeof(DateTime))]
public async Task<IHttpActionResult> PostDatetime(DateTime _dateTime)
{            
   if (!ModelState.IsValid)
   {
      return BadRequest(ModelState);
   }

   using (db)
   {
      db.Reports.Add(_dateTime);
      await db.SaveChangesAsync();                
   }         

   return CreatedAtRoute("DefaultApi", new { id = report.ReportID }, _dateTime);
}

Я не понимаю, проблема ли это в том, как я передаю дату и время из приложения angular, или проблема в моем веб-сайте.

Вы можете помочь мне? Большое спасибо

Попробуйте: new Date().toUTCString()

Prashant Pimpale 22.05.2019 11:43

Спасибо за ответ, Прашант. Если я попытаюсь: this.saveDate = new Date(this.newDate).toUTCString(); не работает, потому что: Тип «строка» не может быть назначен типу «Дата».

20.miles 22.05.2019 11:49

Попробуйте изменить тип данных на строку (для тестирования)

Prashant Pimpale 22.05.2019 11:59

Проверьте опубликованный ответ

Prashant Pimpale 22.05.2019 12:27

Создайте местное время во время UTC, используя метод javascript, и преобразуйте его на стороне сервера. stackoverflow.com/questions/8047616/get-a-utc-timestampjsfiddle.net/naryad/uU7FH/1

Jeeva J 22.05.2019 17:07
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
5
5
2 720
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Я предлагаю сохранить Datetime в вашем бэкэнде С#, например

  DateTime now = DateTime.Now;
  entity.CreatedDate = now;

Я думаю, вы понимаете это неправильно! Пользователь выбирает дату, дату и время, которые он хочет, как есть!

Prashant Pimpale 22.05.2019 11:59
Ответ принят как подходящий

Используйте DatePipe в компоненте для форматирования даты в соответствии с вашими требованиями:

Код ТС:

import { Component, OnInit, ViewChild, } from '@angular/core';
import { DatePipe } from '@angular/common'  // Import this

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [DatePipe] // Add this
})
export class AppComponent implements OnInit {
  newDate = Date.now()
  saveDate: any; // change to any 

  constructor(private datePipe: DatePipe) { } // In constructor
  ngOnInit() {
  }

  onSubmit() {
    this.saveDate = this.datePipe.transform(this.newDate, 'dd/MM/yyyy HH:mm:ss');
    console.log(saveDate ); // and use it as
    // call web api function
    // ...
    //this.reportService.register(this.saveDate).subscribe(() => {});  
  }
}

Working_Demo

Я сделал, как вы написали, но теперь моя функция веб-API выдает мне «ложь» на if (!ModelState.IsValid) и возвращает 400 (Bad Request). Я думаю, потому что функция веб-API требует даты и времени.

20.miles 22.05.2019 13:01

Измените DataType на DateTimeOffset в коде C# вместо использования DateTime , вы можете преобразовать его в DateTime позже, если потребуется.

Дата преобразуется в UTC с помощью сериализации в JSON (в вызове Typescript к веб-API). В коде на стороне сервера C# Web API верните правильное местное время, вызвав _date.ToLocalTime():

 _dateTime = _dateTime.ToLocalTime().

Другие вопросы по теме