MomentJs: How to convert string to date in Typescript?

Question

Im implementing Ag Gird in Angular 2. I have a date column and sorting of dates and Ag grid expects type of date in the format only. Thus I had to send it in the form of date for rendering. But my input is string. I have my dateString in the format 2017-01-19. I'm doing

let myDate:Date = moment(dateString).toDate();

But it's givimg me output as Thu Jan 19 2017 00:00 Indian Standard Time. I tried like this too

let myDate:Date = moment(dateString).format("DD/MM/YYYY");

This gives me error- string is not assignable to Date.

Tried like this too

let myDate:Date = moment(dateString,"DD/MM/YYYY");

But no luck. What I want is, type of the output as date and in the form 19-01-2017

Please suggest

A JS Date has no format, you can get a string representing a Date using moment [`format()`](http://momentjs.com/docs/#/displaying/format/) as you are already doing in the first code example. — VincenzoC, Feb 28 '17 at 16:07
`let myDate:Date = moment(dateString).toDate();` - and why this is not acceptable. What do you want to achieve. `format()` will convert it back to string, and if you just want to display it, it's fine, if you want to send ti to REST, first example is also fine. — mbeso, Feb 28 '17 at 16:08
You're confusing the Date object and its formatting. If you want a Date object, your first set of code is correct; you'll need to use something in Angular 2 or Ag Grid to format the Date correctly. Otherwise, change the type of `myDate` to `string` and use your second set of code. — Heretic Monkey, Feb 28 '17 at 16:15
@MikeMcCaughan, All Angular 2 pipes by default return the output in string format. And first set of code works fine, but the format is not in the required format. — Protagonist, Feb 28 '17 at 16:46
You really need to be clear about what you want from this code. The line of code you've shared is simply setting a Date variable to the output of a Moment.js call. Dates do not have an intrinsic string value (what you see in your output from the first code is what your browser has used for its `toString()` implementation for the `Date` object. Other browsers will vary. — Heretic Monkey, Feb 28 '17 at 16:56
@MikeMcCaughan, My only requirement is, I want to convert string into Date and the type of the output date must be Date and in the specified format. — Protagonist, Feb 28 '17 at 17:01
And I'm telling you that there's no such thing as having a Date object in a format. It just doesn't make sense. — Heretic Monkey, Feb 28 '17 at 17:05
@MikeMcCaughan Ok. What if I format the string like 19-01-2017 and want to covert it into date using moment or any other JS but keep it in the same format? Possible? — Protagonist, Feb 28 '17 at 17:07
I refer back to my previous comment, and will now stop responding, as it doesn't seem like you're getting what I'm saying. — Heretic Monkey, Feb 28 '17 at 17:13

score 14 · Answer 1 · answered Feb 28 '17 at 16:14

14

Try this:

let myDate:Date = moment(dateString,"YYYY-MM-DD").format("DD-MM-YYYY");

Basically, when you call moment(), you should specify the format your current date is in, not the output format that you want. The output format should be specified when calling .format().

answered Feb 28 '17 at 16:14

Wissam

283
1
8

3

That won't work because `myDate` is set to be a Date type. This is essentially the same as the second piece of code the OP has. – Heretic Monkey Feb 28 '17 at 16:15
It's not exactly the same piece of code because in his example, he doesn't specify the date's format when trying to convert it to a moment object. – Wissam Feb 28 '17 at 18:00
3

Which is why I didn't say "exactly the same"; I said "essentially" the same, and it will still fail with the same error. – Heretic Monkey Feb 28 '17 at 18:01

score 4 · Answer 2 · answered Feb 01 '18 at 13:03

4

moment().toDate();

gives a Date object

got the answer from Moment.js transform to date object

answered Feb 01 '18 at 13:03

Alx

291
2
10

Christopher Moore · Answer 3 · 2017-02-28T16:27:00.850

0

You should look to utilise a column renderer framework in your column definitions. Where the field date should be a javascript date. You can generate this from a string via new Date("2017.02.28"), there is no need here to use moment.

{
  colId: "date",
  headerName: "Date",
  field: "date",
  cellRendererFramework: GridDateComponent,
}

This component displays the date formatted how you want utilising the date pipe, whilst preserving the original JSDate for sorting etc.

import { Component } from '@angular/core';
import { AgRendererComponent } from 'ag-grid-ng2/main';

@Component({
    selector: 'date-cell',
    template: `{{params.value | date:'d MMM'}}`
})
export class GridDateComponent implements AgRendererComponent {
    public params: any;

    agInit(params: any): void {
        this.params = params;
    }
}

edited Feb 28 '17 at 16:27

answered Feb 28 '17 at 16:15

Christopher Moore

3,071
4
30
46

There is a problem here. If I do export to excel, it will contain {{params.value | date:'d MMM'}}, not the original date. I got this info from Ag-grid doc – Protagonist Feb 28 '17 at 16:42
1

You didn't mention anything about exporting to Excel in your question. If that is what you want working (it's an enterprise feature), you will have to resort to another option – Christopher Moore Feb 28 '17 at 16:49
My bad, yes I'm using enterprise trial version. Please do let me know if there is a workaround for this. Many thanks – Protagonist Feb 28 '17 at 16:53

MomentJs: How to convert string to date in Typescript?

3 Answers3