Solved

date format angularjs2

Posted on 2016-10-04
16
128 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 55

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

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 
LVL 55

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 55

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 55

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

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

840 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