Formatting Date/Time in TypeScript

I've been having some trouble trying to get a Date object in TypeScript to format the way I want it to.

Date

I have a class Module which is defined as:

Module

export class Module {

constructor(public id: number, public name: string, public description: string,
public lastUpdated: Date, public owner: string) { }

getNiceLastUpdatedTime(): String {

let options: Intl.DateTimeFormatOptions = {
day: "numeric", month: "numeric", year: "numeric",
hour: "2-digit", minute: "2-digit"
};

return this.lastUpdated.toLocaleDateString("en-GB", options) + " " + this.lastUpdated.toLocaleTimeString("en-GB", options);
}
}


When I call the method with the following code:

let date = new Date(1478708162000); // 09/11/2016 16:16pm (GMT)
let module = new Module(1, "Test", "description", date, "test owner");
console.log(module.getNiceLastUpdatedTime());


I end up with the following printed in the console:

'9 November 2016 16:16:02 GMT'


What I want to see is:

09/11/2015 16:16


I've had a look at the documentation at: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString and I still can't see what I'm doing wrong (I know this is a JavaScript API documentation but I'm pretty sure that's what TypeScript is using under the hood).

The formatting of a Date is not something TypeScript has influence over, that's just javascript.
– Alex
Nov 10 '16 at 11:21

@Alex so even though the TypeScript toLocale... functions will accept a locale and an options object they're essentially useless?
– Matt Watson
Nov 10 '16 at 13:41

toLocale...

There is no TypeScript function like that, that is a javascript function. TypeScript merely knows the api and provides a typed interface for it.
– Alex
Nov 10 '16 at 13:47

I get you now. Had a look at the transpiled code and it just passes it straight through untouched. It looks like the problem was with PhantomJS and the way it implements the Date API. It formats dates differently from the other browsers by the looks of it. Running it in Chrome gives me the output I expect.
– Matt Watson
Nov 10 '16 at 13:47

4 Answers
4

If you want the time out as well as the date you want Date.toLocaleString().

Date.toLocaleString()

This was direct from my console:

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


You can then input locale strings and format string to get the precise output you want.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString

The output from my console is the same. When I use the same code in TypeScript however, I get the same result as my original post.
– Matt Watson
Nov 10 '16 at 13:39

It looks like the problem was with PhantomJS and the way it implements the Date API. It formats dates differently from the other browsers by the looks of it. Running it in Chrome gives me the output I expect.
– Matt Watson
Nov 10 '16 at 13:49

Don't get me started on Phantom! It's great in principal, just always had funny bugs like that when using it in anger!
– dougajmcdonald
Nov 10 '16 at 19:53

I suggest you to use MomentJS

With moment you can have lot of outputs, and this one 09/11/2015 16:16 is one of then.

09/11/2015 16:16

1.you can create pipe inherited from PipeTransform base
2.then implement transform method
Used in angular 4 its working
Best way to format Date is pipe:
Create your custom pipe like

import { Pipe, PipeTransform} from '@angular/core';
import { DatePipe } from '@angular/common';

@Pipe({
name: 'dateFormat'
})
export class DateFormatPipe extends DatePipe implements PipeTransform {
transform(value: any, args?: any): any {
///MMM/dd/yyyy
return super.transform(value, "MMM/dd/yyyy");
}
}


and
Used in typescript class like
////my class////

export class MyComponent
{
constructor(private _dateFormatPipe:DateFormatPipe)
{

}

formatHereDate()
{

let myDate=this._dateFormatPipe.transform(new Date())//formatting current ///date here
//you can pass any date type variable
}
}


Code only answers arent encouraged as they dont provide much information for future readers please provide some explanation to what you have written
– WhatsThePoint
Jun 29 at 10:01

I had a similar problem and I solved with this

.format();


How did you solve the problem? Do you have a full code snippet showing the input and results?
– Billy Willoughby
Apr 30 at 13:43

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.