How Can I format Date in typescript?

Question

When I do new Date() in Angular2 (typescript) I GET -> DATEE Wed Jul 18 2018 09:13:40 GMT+0200

The problem is that I have sent Date to Java but Java doesn't let this format.

Java only let ,dd/mm/aaaa or aaaa/mm/dd but he doesn't let Wed Jul 18 2018 09:13:40 GMT+0200.

I try in Angular create a new format but always get String, but I need format Date because my class In Java get Date.

let myDate: Date, myDay, myMonth, myYear;

myDate = new Date();
myDay  = myDate.setUTCFullYear;
console.log(myDay);
myDay  = myDate.toISOString;
console.log(myDay);
console.log(typeof(myDay));
console.log(new Date(myDay));

I can not install libraries that angular does not bring by default for example: "moment". Ty

Possible duplicate of [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — Manwal, Jul 18 '18 at 07:24

score 48 · Accepted Answer · edited Dec 16 '20 at 03:22

48

You can use Angular's DatePipe. In the component where you want to format:

add

providers: [DatePipe]

then import class

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

then inject in constructor

constructor(public datepipe: DatePipe){}

and then in the code you can format like

this.datepipe.transform(this.dueDate, 'yyyy/MM/dd')

change format from 'yyyy/MM/dd' to any you need

edited Dec 16 '20 at 03:22

Sean McKinney

39
7

answered Jul 18 '18 at 07:26

Woworks

1,095
14
19

Hi, console.log( typeof(this.datepipe.transform(dueDate, 'yyyy/MM/dd'))); is type STRING I need type Date – EduBw Jul 18 '18 at 08:24
4

@EduBw - You've said you want to "format" the date. A formatted date is a string. If you want a date, it's just a date, it's not formatted. – T.J. Crowder Jul 18 '18 at 08:29
I said " but I need format Date because my class In Java get Date. " – EduBw Jul 18 '18 at 09:32
You can not convert a Typescript Date value to a Java Date value directly. You have to use the DatePipe to format the Typescript Date into a string representation. In Java you can receive or read this string representation of the Date and use a Dateformater to interpret the string as an Java Date. – IVleafclover Sep 09 '19 at 12:36

score 3 · Answer 2 · answered Jul 18 '18 at 07:31

3

You can use

new Date().toLocaleString() => "11/10/2016, 11:49:36 AM"

then use string.slice to get the part opf the string you want

answered Jul 18 '18 at 07:31

Sujay

465
1
3
16

toLocaleString is String I need Type Date – EduBw Jul 18 '18 at 08:24

score 1 · Answer 3 · answered Oct 15 '20 at 16:19

1

Property 'datepipe' does not exist on type 'HomeComponent'. Did you mean 'datePipe'?ts(2551)

i am getting aboue issue ,datePipe without declared

answered Oct 15 '20 at 16:19

gandharva

11
1

1

You may have to declare datePipe as a provider in your module to use it – iamaword Oct 15 '20 at 21:04

Shubham Verma · Answer 4 · 2018-07-18T09:03:57.987

0

Edit:

if you do not want to use any library then you can use builtin angular's DatePipe

Follow the step to use datePipe:

1: Import DatePipe:

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

2: Add **DatePipe in your module's providers:**

NgModule({
      providers: [DatePipe]
    })
    export class AppModule {
    }

Or you can add datePipe into your component's providers:

@Component({
      selector: 'target-selector',
      styleUrls: ['./target.component.css'],
      templateUrl: './target.component.html',
      providers: [DatePipe]
    })
    export class TargetComponent {
    ...

3: Now inject it into constructor:

constructor(private datePipe: DatePipe) {
}

4: Ready to use:

this.datepipe.transform(this.myDate, 'yyyy/MM/dd');

Or

 this.datepipe.transform(this.myDate, 'MM/dd/yyyy');

edited Jul 18 '18 at 09:03

answered Jul 18 '18 at 07:27

Shubham Verma

6,252
5
46
71

1

OP stated that libraries can't be used – Philipp Sander Jul 18 '18 at 08:08
Hi, I can't install nothing. – EduBw Jul 18 '18 at 08:25
Ok, I missed that. – Shubham Verma Jul 18 '18 at 08:53
Your edit is essentially a duplicate of the accepted answer... – Jerry Nov 11 '19 at 05:49

Roy vd Wijk · Answer 5 · 2020-03-31T12:13:18.353

I would like to answer this question a bit more in detail, instead of answering the initial problem, which was how to format a date in Typescript.

The problem that occurs is that you're unable to read the dates that typescript supplies. The answer to this is not to format the date in typescript, because this will still result in a string, as a formatted date gets converted to a string. Instead you need to parse the string date itself in Java using a function, and then you will have a date variable.

Dates will always be converted to a string when you send it as a response to Java, or any language for that matter. This is the case with any custom variable that is not a string, integer, or boolean (assuming your response is a JSON-format).

The solution to your problem is to just send the date and then use SimpleDateFormat(format).parse(date) to format the date, where format is your desired format, and date the string representation of the date.

How Can I format Date in typescript?

5 Answers5