Angular Date format

Question

Angular Date format

When I retrieve a date value from my angular interface, it appears in the following format.

Sat Dec 29 2018 08:42:06 GMT+0400 (Gulf Standard Time)

However, when I receive the data from an API, the JSON result looks like this. How can I make it the same type?

 2018-12-27T13:37:00.83

This is how it is defined in Typescript:

export interface header{
    vr_date : Date  
}

And this is how it is defined in my Asp API class:

 public class header
 { 
      public Nullable<System.DateTime> vr_date { get; set; }
 }

c#angular typescript

Answer 1

Answer №1

One way to handle date formatting in Angular is by utilizing the built-in DatePipe. Here's how you can do it:

In your Component TS file:

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

@Component({
 // other configurations
  providers:[DatePipe]
})

constructor(public datePipe : DatePipe){

}

To apply the DatePipe:

var format = "yyyy-MM-dd HH:mm:ss"; // You can change the format as needed
this.datePipe.transform(your_date_variable, format);

UPDATE:

If you need to convert a date to GMT, you can use your_date.toUTCString()

Here's an example:

var isoDate = new Date('2018-12-27T13:37:00.83');
var UTCDate = isoDate.toUTCString();

This will output:

Thu, 27 Dec 2018 08:07:00 GMT

Check out this WORKING DEMO for a hands-on experience.

Answer 2

One way to handle date formatting in Angular is by utilizing the built-in DatePipe. Here's how you can do it:

In your Component TS file:

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

@Component({
 // other configurations
  providers:[DatePipe]
})

constructor(public datePipe : DatePipe){

}

To apply the DatePipe:

var format = "yyyy-MM-dd HH:mm:ss"; // You can change the format as needed
this.datePipe.transform(your_date_variable, format);

UPDATE:

If you need to convert a date to GMT, you can use your_date.toUTCString()

Here's an example:

var isoDate = new Date('2018-12-27T13:37:00.83');
var UTCDate = isoDate.toUTCString();

This will output:

Thu, 27 Dec 2018 08:07:00 GMT

Check out this WORKING DEMO for a hands-on experience.

Angular Date format

Answer №1

Similar questions

Angular 2+ encountering an internal server error (500) while executing an http.post request

What is the best way to integrate Circles into a line chart using the "d3.js" library?

Display a single unique value in the dropdown menu when there are duplicate options

What is the proper way to address the error message regarding requestAnimationFrame exceeding the permitted time limit?

displaying a div to indicate an action error

Instructions for adding a new property dynamically when updating the draft using immer

Deleting a NativeScript ImageAsset that was generated using the nativescript-camera module - Easy Steps!

Exploring the World of ESLint, Prettier, Typescript, and VScode Configuration

The health check URL is experiencing issues: Unable to locate any routes

An unhandled C# TypeInitializationException error surfaced in automatically generated code

Retrieve deeply nested array data using Angular service observable

What is the best way to configure eslint or implement tslint and prettier for typescript?

Nested ControlGroup in Angular2's ControlArray

Troubles encountered with doctype while utilizing HtmlAgilityPack

Interacting with ngModel in Angular 4 across different components

Issue: Invalid parameter: 'undefined is not a numeric value' for DecimalPipe

Display the data returned by the stored procedure in a GridView

Observable in RxJS with a dynamic interval

The setLanguage function in jsPDF does not support rendering different language characters

Puppeteer: What is the best way to interact with a button that has a specific label?