Solved

date format angularjs2

Posted on 2016-10-04
16
198 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 4
16 Comments
 
LVL 57

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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
LVL 57

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 57

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 57

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Laravel+AngularJS project 27 52
PHP Web Development 6 64
What kind of script/language created this graph? 6 58
Make Float not to Wrap 15 63
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…

738 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