Solved

date format angularjs2

Posted on 2016-10-04
16
40 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 51

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
 
LVL 51

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 51

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 51

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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now