Solved

date format angularjs2

Posted on 2016-10-04
16
105 Views
Last Modified: 2016-11-17
My date format returns
/Date(1326258000000)/

Open in new window

in json.
st.Date  | date:'dd/MM/yyyy'

Open in new window

 does not  format my date. How can I in angularjs2
0
Comment
Question by:sevensnake77
  • 6
  • 5
  • 4
16 Comments
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41828490
Can we see a context?
0
 
LVL 9

Author Comment

by:sevensnake77
ID: 41828560
Well maybe in angular2 I need to create a pipe filter for the date format as well. Not like angular 1.
Not sure the bigger picture you would like to see.


<table>
<tr *ngFor='#t of list'>
 <td>{{t.Name}}</td>
 <td>{{ dlist.NotInvestedDate | date: 'dd/MM/yyyy'}}</td>
</tr>
</table>

Open in new window

Using a angularjs Service  that loads from mvc Controller.
Returns Json format data.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 41828723
"/Date(1326258000000)/"

your service returns this string, exactly like that? or just the datestamp?
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41828744
What does this produce
{{dlist}}
0
 
LVL 9

Author Comment

by:sevensnake77
ID: 41829032
It returns it just like that.
0
 
LVL 9

Author Comment

by:sevensnake77
ID: 41829034
julian typo it suppose to be t not dlist
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 41829162
if that's the exact string, then you need to extract the timestamp before passing to the date filter.

probably best with a regular expression.

var mre = /\d+/g;
d = parseInt("/Date(1326258000000)/".match(mre,$1))

Open in new window


returns
1326258000000

Open in new window


you can write a custom filter that gets processed before the date filter, or you can parse your data in the controller, or service. There are many ways to skin this cat.
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41829292
julian typo it suppose to be t not dlist
Line 4 ????
<td>{{ dlist.NotInvestedDate | date: 'dd/MM/yyyy'}}</td>

Open in new window

We need to see what is in dlist
0
 
LVL 9

Author Comment

by:sevensnake77
ID: 41830176
Example

in angular1 I could parse the data JSON.parse(value); when returning from api  because the data returned "{\"_body\":\"[{\\\"ID\\\":33,\\\"Nam\\\":\\\"SusCampbell\\\"NotInvestedDate":"2012-01-11T00:00:00"",

    getboard(): Observable<Idata[]> {
        return this._http.get(this._dashUrl)
            .map((response: Response) => <Idata[]>response.json())
          //  .do(data => console.log('All: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }


Julian I see.
nothing in dlist. ok. please.
<td>{{ t.NotInvestedDate | date: 'dd/MM/yyyy'}}</td>


Kyle not sure to make this happen in a angularjs2 service?
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41830210
Is that your returned data?
how are you getting
Date(1326258000000)
From that.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 41830246
you can provide multiple filters in your expression.

{{ t.NotInvestedDate | my_regex_filter | date:'dd/MM/yyyy'}}

write a filter that takes your string as input and returns the timestamp using the regular expression
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 41830254
but like Julian pointed out, your API appears to be returning a date string not what you stated earlier.

what is the exact value rendered by t.NotInvestedDate?
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 41830298
Here is blog post describing how to make filters in angular2. This is different from 1.x:

http://jilles.me/ng-filter-in-angular2-pipes/

import {Pipe} from 'angular2/core';

// Tell Angular2 we're creating a Pipe with TypeScript decorators
@Pipe({
  name: 'DatePipe'
})
export class DatePipe {
 // Transform is the new "return function(value, args)" in Angular 1.x
  transform(value, args?) {
    var re = /\d+/g;
    d = parseInt("/Date(1326258000000)/".match(re,$1))
    return d
  }

}

Open in new window

0
 
LVL 9

Author Comment

by:sevensnake77
ID: 41830815
thanks I already thought this was the fix. thanks
0
 
LVL 9

Author Closing Comment

by:sevensnake77
ID: 41891978
thanks
1

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
You have this traditional web application that refreshes the whole page each time you navigate and you think it's a good time to convert it to a Single-Page approach. What should you know in advance? Read on, I'll guide you through it.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question