Not working or I'm not using it correctly. I have a date saved in mongodb (which is correct) as:
"2015-12-10T12:00:00.000Z"
I have an angular filter of date as:
date: 'medium' that shows Dec 10, 2015 7:00:00 AM in the view
date: 'medium' : +0500 bumpeds it to Dec 10, 2015 5:00:00 PM
date: 'medium' : -0500 it shows as: Dec 10, 2015 7:00:00 AM AGAIN
How the hell do I get it to show at 12pm?! lol I'm on EST time
The Z at the end means "UTC". So, that date represents the instant that is displayed as 2015-12-10T12:00:00.000 in the UTC time zone.
And you want to display it as if you were in the UTC time zone, since you don't want the time part to be different from the one it has in UTC.
So, use UTC as the time zone:
date:'medium':'UTC'
Output:
Dec 10, 2015 12:00:00 PM
filter
Create a custom filter first:
.filter( 'trimDateTime', function(){
function(ds){
var z = ds.indexOf('Z')
return ds.substr(0, z)
}
}
html
Then apply 2 filters to the data
<p>{{ dateString | trimDateTime | date: 'medium' }}</p>
why
Angular filters are powerful mechanisms for leaving your data intact but rendering a special way. You could have easily trimmed the 'Z' from your date string but then later on, another UX might be expecting that data to be intact.
codepen
http://codepen.io/jusopi/pen/pgvOBr
Related
I have concern regarding date formatting and the time, happens right now I have record of 2022-09-12T21:18:38.000Z then after formatting that created_at the result is September 13 2022 05:18:38. The problem is the real data September 12 in formatted becomes September 13.
Package Moment Version:
"moment": "^2.29.4",
"moment-timezone": "^0.5.37",
Sample Code:
import moment from "moment";
import 'moment-timezone';
<Text fontSize="12" mt="2" fontWeight="300">{moment.tz(res?.created_at, "Asia/Manila").format("MMMM DD YYYY HH:mm:ss")}</Text>
<Text>{res?.created_at}</Text>
Current Output:
You have a time string with Z at the end, which is Zulu, or UTC+0. And you are using .moment.tz with "Asia/Manila". And "Asia/Manila" is UTC+8. And 2022-09-12T21:18:38.000Z in UTC+0 is September 13 2022 05:18:38 for UTC+8.
If you want to format this date to UTC time string - you can use any of those:
Using moment timezone:
moment.tz("2022-09-12T21:18:38.000Z", "UTC").format("MMMM DD YYYY HH:mm:ss")
=> 'September 12 2022 21:18:38'
Using plain moment
moment.utc("2022-09-12T21:18:38.000Z").format("MMMM DD YYYY HH:mm:ss")
=> 'September 12 2022 21:18:38'
So it will be for you:
{moment.tz(res?.created_at, "UTC").format("MMMM DD YYYY HH:mm:ss")}
or
{moment.utc(res?.created_at).format("MMMM DD YYYY HH:mm:ss")}
I don't understand what is happening with date in angular world
I have create same date and trying to display them in local or UTC but getting unexpected result
UPDATE:
I want to know are the actual value and display value same in following cases?
why adding timezoe to date filter does not do anything?
if I want to create date and set hour to 12 PM UTC and to be display locally what is the correct way.
is it possible to create an specific date with hour set 12 in UTC and always display in UTC (not local timezone)
//template
<div ng-app ng-controller="MyCtrl">
<p>expecting date in local time {{date1}} </p>
<p>expecting date in local time along with time offset{{date1 | date:'yyyy-MM-dd hh:mm a Z' }} </p>
<p>expecting date in UTC time along with time offset{{date1 | date:'yyyy-MM-dd hh:mm a Z': 'UTC'}}</p>
<p>expecting date in local time {{date1 | date:'yyyy-MM-dd hh:mm a': 'UTC'}}</p>
<p>expecting time to be -10 hour from UTC {{date1 | date:'yyyy-MM-dd hh:mm a ': '-1000'}}</p>
<p>Expecting it to be in UTC: {{date2}}</p>
<p>Expecting it to be in UTC same as above {{date2 | date:'yyyy-MM-dd hh:mm a': 'UTC'}}</p>
<p>Expecting it to be -10 from UTC {{date2 | date:'yyyy-MM-dd hh:mm a': '-1000'}}</p>
<p>expecting it to be +12 from utc {{date4 |date:'yyyy-MM-dd hh:mm a': 'UTC'}}</p>
</div>
and following is my controller
// controller
function MyCtrl($scope, $filter) {
$scope.date1 = new Date("2017-12-13");
$scope.date2 = new Date(2017,11,13).toISOString();
$scope.date3 = new Date(2017,11,13);
$scope.date4= new Date($scope.date2).setHours(12)
console.log('date1',$scope.date1);
console.log('date2', $scope.date2);
console.log('date3', $scope.date3);
console.log('date4', $scope.date4);
console.log($filter('date')($scope.date2, 'medium'));
}
[Fiddle][1]
[1]: https://jsfiddle.net/sohail85/bzwoxtw2/
Usually code like as:
html
<p class="small-grey-text float-left">
{{ product.date-created | date:'MMMM dd, yyyy ' }}
</p>
json
[{"date-created": 1475798400 }]
This is must look as October 07, 2016
Result
January 01, 1970
It looks like you are having the same problem as in this thread. The date pipe format is correct you need to multiply out the date by 1000.
date-created or dateCreated is word of element for JS.
Let me that is like with working - date_created or datecreated
I am getting date in epoch format from the backend.
updatedOn = 1427171737000 (from backend)
I am using angular filter to display the date.
{{updatedOn | date: "MM/dd/yyyy ' ' h:mma Z" }} ==> it turns to be 2015-03-23 21:35:37 -0700
I would like my output to be displayed in PST format which will be 2015-03-24 04:35:37
Any ideas?
If you are using 1.3+ of AngularJS then you just need to pass in the timezone
{{ date_expression | date : format : timezone}}
https://code.angularjs.org/1.3.15/docs/api/ng/filter/date if you want to read further.
{{updatedOn | date: "MM/dd/yyyy" : 'PST' }}
I have input:
Tue Apr 15 2014 18:00:28 GMT+0300 (IDT)
When I try to run filter:
var currDate = $filter('date')(new Date(date), 'dd-MM-yyyy h:mm');
I get:
"15-04-2014 6:00"
In input hour is 18 but I get 6
Here is a Demo that demonstrates the problem.
Thanks,
You need to tell it to use the 24 hour clock, so instead of h use HH. Documented here