Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 5, HttpClient changes Date fields to UTC

I Have an object which has a Date type property on client side. When I try to send object via HttpClient.post to server, property's value changes to UTC timezone.

On client side value is Sun Nov 26 2017 00:00:00 GMT+0300 (Turkey Standard Time) but when it goes to server, changes to : 25.11.2017 21:00:00

How can I control This?

This is my class.

export interface IBill {
   BillID : number;
   SubscriptionID:number;
   SiteID : number;
   SubscriptionName: string;
   Amount: number;
   Date: Date;
   PaymentDeadline: Date;
   Virtual: boolean;
   Portioned: boolean;
   Issuanced: boolean;
   FinancialTransactionComment : string;}

I create an object of this while filling a ng-form, then call following Http.post :

let bill = this.formData;
this.http.post(this.configuration.ServerWithApiUrl + url, bill , { headers: headers, withCredentials: true, observe: "response", responseType: 'text' })
        .map((response) => {
            return this.parseResponse(response);
        }).catch(
        (err) =>
            this.handleError(err));
like image 256
h.jalilzade Avatar asked Nov 26 '17 12:11

h.jalilzade


People also ask

How do you convert Date to UTC Date?

var now = new Date(); var utc = new Date(now. getTime() + now. getTimezoneOffset() * 60000);

What is UTC Date format?

Microsoft uses Coordinated Universal Time (UTC) format, an international standard 24-hour timekeeping system, to document the created dates and times of files that are included in a software update.

How do I convert datetime to Date in TypeScript?

Use the Date() constructor to convert a string to a Date object in TypeScript, e.g. const date = new Date('2024-07-21') . The Date() constructor takes a valid date string as a parameter and returns a Date object. Copied!

How do you convert UTC time to local time in node JS?

Use the Date() constructor to convert UTC to local time, e.g. new Date(utcDateStr) . Passing a date and time string in ISO 8601 format to the Date() constructor converts the UTC date and time to local time.


2 Answers

Use an HttpInterceptor for modifying request body on put/post requests. Recursively update all date fields by creating corrected Date objects.

Sample code:

@Injectable() export class UpdateDateHttpInterceptor implements HttpInterceptor {

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.startLoading();
    if (req.method === 'POST' || req.method === 'PUT') {
        this.shiftDates(req.body);
    }
  }

  shiftDates(body) {
    if (body === null || body === undefined) {
        return body;
    }

    if (typeof body !== 'object') {
        return body;
    }

    for (const key of Object.keys(body)) {
        const value = body[key];
        if (value instanceof Date) {
            body[key] = new Date(Date.UTC(value.getFullYear(), value.getMonth(), value.getDate(), value.getHours(), value.getMinutes()
                , value.getSeconds()));
        } else if (typeof value === 'object') {
            this.shiftDates(value);
        }
    }
  }
like image 62
Abdullah Arslan Avatar answered Sep 20 '22 13:09

Abdullah Arslan


I changed Type of Date, PaymentDeadline to string.

export interface IBill {
   BillID : number;
   SubscriptionID:number;
   SiteID : number;
   SubscriptionName: string;
   Amount: number;
   Date: string;
   PaymentDeadline: string;
   Virtual: boolean;
   Portioned: boolean;
   Issuanced: boolean;
   FinancialTransactionComment : string; }

and before sending to service rewrite them.

let bill = this.formData;
bill.Date = this.formData.Date.toLocaleString();
bill.PaymentDeadline = this.formData.PaymentDeadline.toLocaleString();

in this case time will sent as string ("11/10/2017, 12:00:00 AM") and no change will be done for UTC time Zone

like image 36
h.jalilzade Avatar answered Sep 18 '22 13:09

h.jalilzade