convert time stamp to Date inside angular expression like {{new Date(timestamp)}} - javascript

Today I found that's it's not working to convert for a date inside angular expression.
So I just making something like
<th>{{new Date(elem.timestamp}}</th>
But it fails with internal angular error.
So why it's not possible to cast to Date inside angular expression?

Because angular expressions do not accept arbitrary Javascript code, including creating new objects. What you are looking for is called angular filters, they were specifically designed for this case.
So instead of
{{new Date(elem.timestamp)}}
you should write
{{elem.timestamp | date: 'yyyy-MM-dd'}}
More info on the date filter can be found here. More on filters, in general, can be found here.

If you are dealing with Firebase Timestamp object (https://firebase.google.com/docs/reference/android/com/google/firebase/Timestamp), you can use:
{{elem.timestamp.seconds*1000 | date}}

Just an extention of what #package mentioned we can also go to hour-second as well from millisecond, the format can be any pattern as well
< th >{{elem.timestamp | date: 'yyyy/MM/dd h:mm:ss a'}}< /th >

Dealing with Firebase timestamp I use :
{{ element.seconds * 1000| date:'short' }}

It is probably best to use a library like moment for this. Also the functionality you are looking for is meant to be implemented via "filters"
Also see angular-moment

When the timestamp is in milliseconds:
Only Date:
{{elem.timestamp | date: 'yyyy-MM-dd'}}
Date & Time:
{{elem.timestamp | date: 'yyyy/MM/dd hh:mm:ss a'}}
Date & Time(24-hr format):
{{elem.timestamp | date: 'yyyy/MM/dd HH:mm:ss'}}
When your timestamp is in seconds, then just multiply with 1000:
{{elem.timestamp*1000 | date: 'yyyy/MM/dd HH:mm:ss'}}

It's working to convert for a date inside an Angular expression.
So I just making something like:
{{elem.timestamp | date: 'yyyy-MM-dd'}}

Related

Date Pipe in Angular 8

I have a problem with the handling of dates in angular 8.
I have an api rest with symfony4 (apiPlatform) and it returns the dates with this format
"balanceDate": "2010-10-04T00:00:00+00:00"
If I pass it to my template without the applied Date pipe it puts exactly the same text
2010-10-04T00:00:00+00:00
when I use the pipe as follows in angular
{‌{ balanceDate | date:'dd-MM-yyyy' }}
The date is represented with one day less
I have been doing tests, I manually added the date to the pipe and I was deleting parts of the date
{‌{ '2010-10-04T00:00:00+00:00' | date:'dd-MM-yyyy' }} - Fail
{‌{ '2010-10-04' | date:'dd-MM-yyyy' }} - Correct
{‌{ '2010-10-04T00:00:00' | date:'dd-MM-yyyy' }} - Correct
So I deduced that this part of the date
+00:00
It is the cause of the problem
I honestly have no idea on which side I should work the date output, whether in Angular or in the symfony api rest.
I hope you can guide me to solve this problem
Thank you
If you know that the date is set as a UTC value ("+00:00" or "Z" for the timezone), you can add the timezone specifier to the date pipe:
date:'dd-MM-yyyy':'UTC'
the solution is to passe the string date to the Object Date of javascript to get a valid Object Date Javascript in the component before to use it on the template:
newdate = new Date('2010-10-04T00:00:00+00:00');
demo: Demo Angular

Output formatted date from Angular date filter in specific locale?

I am using the following filter:
{{music.start | date : "dd MMMM yyyy"}}
Angular outputs the month in the computer's locale. But I let my users choose the locale in the application.
localize.language = "en"
What is a good way to tell Angular to output the formatted date in that language instead of the computer locale?
I'm fantasizing about something akin to:
{{music.start | date : "dd MMMM yyyy" : localize.language}}
But I appreciate any idea for a solution.
Either you
use toLocaleDateString() to convert the date in your controller and append it as a property to your music object or
you use symbolic names like {{music.start| date:'shortTime'}} - however, that does not yield the really short date without time information you are looking for.
Here's a blog post about the different ways to format locale-specific.
Your idea wouldn't work since you hand in a fixed date string and expect it to be re-formatted according to locale. That would be error-prone and hard to understand.
You can try below example in your controller
var options = { month: 'long', day: 'numeric',year: 'numeric' };
console.log(music.start.toLocaleString('en-US', options))
Also more information about toLocaleString() is present on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString url.
Here is the documentation.
https://angular.io/api/common/DatePipe
The example they give is:
<!--output 'Lundi 15 Juin 2015 à 09:03:01 GMT+01:00'-->
<p>The full date/time in french is: {{today | date:'full':'':'fr'}}</p>

Display datetime from json without formatting to locale timezone in javascript with moment.js

Get following date from JSON response: 1470995100000
But angular-moment will convert this long to the current date + timezone offset. How can i avoid this?
{{ item.startDate | amDateFormat:'HH:mm' }}
Should be = 07:55 (correct value from database - always based on local timezone).
But for example 09:55 will be displayed (if the timezone on the local machine was changed)
Kind regards
Have you tried moment.utc(...) ?
The value 1470995100000 is a representation that is the number of milliseconds since the Unix Epoch (1970-01-01T00:00:00Z), corresponding to 2016-08-12T09:45:00Z.
Assuming 9:55 was a typo and you meant 9:45, then you simple are asking for your code to display the UTC time.
While fizbuszene's answer is correct from a moment.js perspective, your question was about the angular-moment library's declarative form. You simply need to use their amUtc filter, as shown in the documentation.
{{ item.startDate | amUtc | amDateFormat:'HH:mm' }}

Add time to date with angular

In my Firebase I have:
Firebase generated date for a created day.
Terms set by the user when the above was generated.
So for example I have:
1439612582756 // formats to: Aug 14, 2015
15 // Formats to: "Net 15" in my code
My code looks like this:
<td>{{invoice.settings.created | date}}</td>
<td>{{invoice.settings.created + invoice.settings.terms | date}}</td>
I have installed moment.js and 'angular-moment.js' to be able to format and play with dates, but I didn't see a way to add time to a date. This is for a for-each so I don't want to have to do any pre-scripting for this. Maybe a custom filter to add the terms to the date?
Obviously, my code above does not function. I just made that to demonstrate what I am wanting.
Any help would be appreciated!
UPDATE
Using this page: http://momentjs.com/docs/#/durations/add/ I came up with this filter:
.filter('dateTerms', function() {
return function(created, terms) {
var a = moment.duration(created, 'd');
var b = moment.duration(terms, 'd');
return a.add(b).days();
}
})
But when I call it, I always end up with just 0?
<td>{{invoice.settings.created | date}}</td>
<td>{{invoice.settings.terms | dateTerms}}</td> // This line
I'm guessing it's because I'm only passing the filter the terms and not the created date. How would you pass two variables? I think I'm getting closer....
UPDATE 2
I dumped the moments crap. This is what I have now:
.filter('dateTerms', function() {
return function(input, created) {
var date = new Date(created*1000);
date.setDate(date.getDate() + input);
return (date.getMonth()+1)+'/'+ date.getDate() +'/'+date.getFullYear();
}
})
And then in my html:
<td>{{invoice.settings.terms | dateTerms:1439746291480}}</td>
1439746291480 converts to `Aug 16, 2015`
This results in:
8/24/47601
Using method chaining with Moment.js, you can easily perform these kind of calculations in a single statement. For example:
return moment(new Date(created)).add(terms, 'days').format('MM/DD/YYYY');
Using Moment.js also will make your life easier in other ways, since it automatically deals with daylight savings, leap years, time zones, etc., making any of your date and time calculations more accurate.

Date format in angular js

I am displaying date in this format using angular
{{ date }} ,date:\'MM-dd-yyyy HH:MM:ss\
how to display like Jan-dd-yyyy using angular
Is there any dirct way to do using angular js- (Using normal jquery i am able to do)
use Angular filter of date.
{{date | date:'MM-dd-yyyy HH:MM:ss'}}
See the following link.
http://docs.angularjs.org/api/ng.filter:date
Well,
according to the docs, you have a builtin filter in angular, called date:
<p>{{Date.now() | date:'yyyy'}}
would render to:
<p>2013</p>
The yyyyin this case can be any format string documented. In the example you gave, this would be:
{{date | date: 'MMM-dd-yyyy'}} # => "Jan-21-2013" (if date was a date object for this day)
For custom date:
$scope.user.dob = new Date('1980', '12' ,'10'); // controller code
{{user.dob | date : 'MMM-dd-yyyy'}} // Dec-10-1980
For current date:
$scope.user.current= new Date(); // controller code
{{user.current | date : 'MMM-dd-yyyy'}} // Current date in given format
Try this
{{ date }} ,date:\'MMM-dd-yyyy HH:MM:ss\

Categories