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
Related
is any chance to format date in ng-repeat?
I was trying to format it like
<div class="col-date">{{row.Calendar.start | date : "dd.MM.y"}}</div>
But it was not working. How do I format date in ng-repeat?
Use moment and angular-moment, are definitely best modules out there for stuff related to dates.
First of all convert $scope.row.Calendar.start to date/moment object if it is a string and then use angular moment to show desired date format
Here is a how you can do so:
Inside controller:
$scope.row.Calendar.start = moment($scope.row.Calendar.start,'YYYY-MM-DD HH:mm:ss');
<div class="col-date">{{row.Calendar.start | amDateFormat : "dd.MM.y"}}
From AngularJS perspective everything seems to be valid.
Please check following:
Format of the data you provide to your date filter - is it UNIX timestamp or something else that might be processed by filter?
Check if the data that you are trying to parse, is available
Please provide us with more information about what are you trying to convert, and what result do you have
It seems like you are trying to apply angular date filter of a string object.
Try to first convert it to a Date object in controller and then apply date filter on it.
EXAMPLE
$scope.dtObj = new Date($scope.row.Calendar.start);
then in HTML write this
<div class="col-date">{{dtObj | date : "dd.MM.y"}}</div>
for more details check out documentation here https://docs.angularjs.org/api/ng/filter/date
try this it worked for me hope for you to
{{row.Calendar.start | date:'MMM-dd-yyyy'}}
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' }}
Hi I am trying to figure out how to display date properly using angularjs.
My system returns the date in this fromat
c_date="\/Date(1151470800000-0500)\/"
I dont know what format is it.
I am displaying it
using <span>{{pro.c_date | date:'medium')</span>
When i run this i get date printed in same format
"/Date(1151470800000-0500)/"
Can anyone suggest how to fix this so date can be displayed properly.
Thanks
the date that you're trying to use is a invalid date or maybe I don't know what format are the system using.
The problem is that angular.js requires a data object for can format it. Not a date string.
I suppose that the date is 1151470800000 miliseconds since the epoch least 0500 for adjust hours or something.
If this is correct, you only need to make c_date a Date object before pass to view.
c_date = "\/Date(1151470800000-0500)\/";
var the_date = eval("new "+c_date.replace(/\\|\//g, ''));
http://jsbin.com/zuwizoxe/3/
Regards!
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'}}
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\