Format datetime in TypeScript

Question

I'm receiving date and time from the REST API in the below format

2016-01-17T:08:44:29+0100

I want to format this date and time stamp like

17-01-2016 08:44:29

It should be dd/mm/yyyy hh:mm:ss

How to format this in TypeScript?

are you talking about just to display on UI if yes then I post my answer . — Yashveer Singh, Jan 15 '17 at 08:29
@YashveerSingh No. I want to format in typescript, not with pipes — Protagonist, Jan 15 '17 at 08:32
ok sorry I thought otherwise I will remove my answer . Let me check about how to do it in typescript . — Yashveer Singh, Jan 15 '17 at 08:34
@YashveerSingh I'm using some third party module for UI and I cannot format in HTML. So i have to handle the format in typescript and send it for rendering — Protagonist, Jan 15 '17 at 08:36
typescript it self provide some methods like to new Date().toLocaleString() . have you tried all available ? I am trying them now if it work will post the answer . — Yashveer Singh, Jan 15 '17 at 08:39

score 15 · Answer 1 · edited Jan 15 '17 at 08:40

15

you can use moment.js. install moment js in your project

 moment("2016-01-17T:08:44:29+0100").format('MM/DD/YYYY');

for more format option check Moment.format()

edited Jan 15 '17 at 08:40

clearlight

12,255
11
57
75

answered Jan 15 '17 at 08:32

Amit kumar

6,029
6
30
40

3

I cannot use moment.js – Protagonist Jan 15 '17 at 08:33
for html part you can do using pipe
Or if you prefer, {{today | date:'fullDate'}}
– Amit kumar Jan 15 '17 at 08:34
I'm using some third party module for UI and I cannot format in HTML. So i have to handle the format in typescript and send it for rendering – Protagonist Jan 15 '17 at 08:35
if you want to do it just using ts then first extract all day,month,year then concat them in string . i use mostly moment.js. may i know why can't you use moment.js ? @Protagonist – Amit kumar Jan 15 '17 at 08:36
Correct. I know how to concat. But how to extract the date and time into strings? – Protagonist Jan 15 '17 at 08:39
typescript is superset of javascript. so every date method will work in typescript. just extract getDay() month() in a variable and in new variable just add all of them like var stringdate=day+'/'+month+'/'+year. in stringdate var you will get string format of you date – Amit kumar Jan 15 '17 at 08:46
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133184/discussion-between-amit-suhag-and-protagonist). – Amit kumar Jan 15 '17 at 08:47
moment.js is deprecated - no more maintained. I prefer day.js instead – Matley Jul 22 '21 at 12:55

John · Answer 2 · 2021-06-15T23:25:42.020

11

Have a look at this answer

You can create a new Date("2016-01-17T08:44:29+0100") //removed a colon object and then get the month, day, year, hours, minutes, and seconds by extracting them from the Date object, and then create your string. See snippet:

const date = new Date("2016-01-17T08:44:29+0100"); // had to remove the colon (:) after the T in order to make it work
const day = date.getDate();
const monthIndex = date.getMonth();
const year = date.getFullYear();
const minutes = date.getMinutes();
const hours = date.getHours();
const seconds = date.getSeconds();
const myFormattedDate = day+"-"+(monthIndex+1)+"-"+year+" "+ hours+":"+minutes+":"+seconds;
document.getElementById("dateExample").innerHTML = myFormattedDate

<p id="dateExample"></p>

It is not the most elegant way, but it works.

edited Jun 15 '21 at 23:25

answered Jan 15 '17 at 08:51

John

10,165
5
55
71

I'm getting "Object expected" error at var myFormattedDate =day+........; and Im using typescript – Protagonist Jan 15 '17 at 09:41
Did you try to run the snippet? You also have to get rid of the first colon in your api format in order to make a valid Date object – John Jan 15 '17 at 10:23
You can remove the first colon by using the `replace()`-method like this: `var myStr = "2016-01-17T08:44:29+0100".replace(":","");` – John Jan 15 '17 at 11:07
My bad.. there was no colon in the input. Im getting object expected error if I do console.log right after let day= date.getDate(); I'm using typescript – Protagonist Jan 15 '17 at 11:27
It should work as it is, but I do not know how you execute your code. You could try to write `var date:Object = new Date("2016-01-17T08:44:29+0100");` Adding an Object type to date. – John Jan 15 '17 at 12:10
There is no mucg difference between var and let except scope. I tried with let day: Date = date.getDate(); but no luck – Protagonist Jan 15 '17 at 12:43
You should not write `let day: Date = date.getDate();`, but `let date:Date = new Date("2016-01-17T08:44:29+0100");` the day is a `number`. date is a `Date`. Also try to use `Object` as a type instead of `Date` if it does not compile – John Jan 15 '17 at 12:50
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/133193/discussion-between-protagonist-and-john). – Protagonist Jan 15 '17 at 12:56
you need to use parentesis when adding 1 to month: return day+"-"+(monthIndex+1)+"-"+year+" "+ hours+":"+minutes+":"+seconds; – sourcerebels Sep 18 '17 at 13:32
1

@sourcerebels thank you for pointing that out. I have updated my answer accordingly – John Sep 18 '17 at 13:39
`const day = date.getDate();` -> `const day = date.getDay();` – Joop Aué Jun 08 '22 at 09:21
1

@JoopAué `getDay` will give you a number between 0 and 6, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay, not the actual date. – John Jun 09 '22 at 02:16

I'm · Answer 3 · 2020-03-31T19:25:58.207

4

new Date().toLocaleString()

output:

"31/03/2020 ,00:00:0"

(now,your output is string)

edited Mar 31 '20 at 19:25

answered Mar 31 '20 at 09:07

I'm

313
2
7

score 3 · Answer 4 · answered Apr 17 '17 at 06:41

Check if this is helpful.

var reTime = /(\d+\-\d+\-\d+)\D\:(\d+\:\d+\:\d+).+/;
var originalTime = '2016-01-17T:08:44:29+0100';
var newTime = originalTime.replace(this.reTime, '$1 $2');
console.log('newTime:', newTime);

Output:

newTime: 2016-01-17 08:44:29

Format datetime in TypeScript

4 Answers4