Applying AngularJS date filters with condition - angularjs

I just started with AngularJS and got stuck with a problem.
I have a date field to show in a grid.
Date format should be relative format like "1 day ago, 10 mins ago...."
So for that i used timeAgo, so it formats the date correctly.
But I have a requirement like:
If the last_updated_time is less than 10 days, then show relative time like "1 day ago, 10 mins ago...." else do not apply any filter.
Here is my code snippet.
<td data-title="'Last modified'" sortable="'last_updated_time'" align='center'>
{{offer.last_updated_time | timeAgo }}
</td>
It would be great if someone can guide me how to proceed.

Use a function to get this:
$scope.getTimeAgo = function(last_updated_time ){
var today = new Date();
var days = today.diff(last_updated_time , 'days');
if(days > 10)
return last_updated_time;
else
return moment(last_updated_time).fromNow();
};
then you can use it like follow:
{{getTimeAgo(offer.last_updated_time)}}
PS: I'm using momentjs for time ago but you can apply your time ago function into the else if you want to use your filter.

Related

Angular adds a day when displaying the date (dd/MM/yyyy)

I have a datepicker where the user picks the date without choosing the time, the date is saved correctly in my data base but when I display it, it shows one day ahaid, when I looked up the issue it turns out that it's a timezone issue that lots of people face but i didn't quite understand how to fix it in my code :
<tbody>
<tr ng-repeat="ft in ftListesorted">
<td>{{ft.NomProjet}}</td>
<td>{{ft.NomTache}}</td>
<td>{{ft.Datefeuillestemps | date : 'dd/MM/yyyy' }}</td>
</tr>
</tbody>
I get the "ft.Datefeuillestemps" from my database where the default time is always set to T00:00:00.
For example here's how my date is stored in the data base : 2017-05-17 00:00:00.0000000 and this is what I get in my view : 18/05/2017 so a day is added.
How can I solve this issue ?
$scope.passdate = function (dt) {
var targetTime = new Date(dt);
var timeZoneFromDB = -7.00; //time zone value from database
//get the timezone offset from local time in minutes
var tzDifference = timeZoneFromDB * 60 + targetTime.getTimezoneOffset();
//convert the offset to milliseconds, add to targetTime, and make a new Date
var offsetTime = new Date(targetTime.getTime() + tzDifference * 60 * 1000);
$scope.ISODateString(offsetTime);
}
check this if helps
You could subtract (new Date()).getTimezoneOffset() from your object (assuming the date in the database is on GMT), but this is not perfect. You will still have issues when timezones change differently because of daylight saving time.

converting date format in angularjs controller

i write the following coding to print the current date time
$scope.date = new Date();
and then i print the same using consol.log
console.log($scope.date);
and it is working fine
Tue Jan 24 2017 16:36:06 GMT+0530 (India Standard Time)
but now i want to change the date format and i want to print like
21-12-2016
can anybody help me here?
i used the conversion but i am unable to remember the page or the url of the page right now,
and stuck on this,
before i leave for the home today i thought of solving this issue
In controller you can do
$filter('date')(date, format, timezone)
to change the date format. And in html,
{{ date_expression | date : format : timezone}}
use this.
Like
$scope.formattedDate = $filter('date')($scope.currDate, "dd-MM-yyyy");
to print same on html
{{ currDate | date : "dd-MM-yyyy"}}
https://docs.angularjs.org/api/ng/filter/date
Following formats are supported by angular.
You can do this either in controller or in html page.
$scope.date = new Date();
The first one is :
$scope.date = $filter('date')($scope.date, 'dd-MM-yyyy');
Second one is :
{{date | date:'dd-MM-yyyy'}}
You can use the Angular date filter:
{{date | date: 'dd-MM-yyyy'}}
You can use the in-build js libraries functions i.e getDay(), getHours(), getMinutes(), getMilliseconds(). This functions will return you the corresponding date's individual components values.
e.g
var x = $scope.yourDateModelObj.getHours();
Likewise, you can get the date, month, years values.
return an integer value for hours.
Hope that helps

Ng-show based on timestamp

I have a
As a scope I have: $scope.getDatetime = new Date();
And I wanna make the following work:
<span ng-show="getDatetime > foobar.datetime">Foobar</span>
The foobar.datetime is from ng-repeat with the format of: 2014-08-20 01:45:15
So I only wanna show that element, when current time is bigger then the datetime given.
Thought it was a easy as my example above, but it isn't - and I can't figure out if it's even possible without using plugins.
If I'm reading this correctly, then your issue is that your comparing a string and a date object. Try:
<span ng-show="getDatetime > getDate(foobar.datetime)">Foobar</span>
And in your javascript:
$scope.getDate = function(date) {
return new Date(date);
}
You need to convert your date to a timestamp, then you can compare the 2 dates, perhaps try using a filter to convert to a time stamp.

angular js filter using moment js give wrong date ago

I create filter to format date into times ago,like 2015-01-03 01:00:00 give 1 hours ago,
for accomplish that i create angular filter as following.
angular.module('myApp').filter('from', function() {
return function(date) {
return moment(date).fromNow();
}
});
When I apply it. withing my angular controller. as following
{{2015-01-02 01:00:00 | from }}
Instead of given 1 days ago it give 45 years ago i can't understand why
Try qoute the date:
{{'2015-01-02 01:00:00' | from }}

Order By Date and truncate date strings in Angular

I have a json file with a released field that comes back with such format:
released: "2002-01-28"
I intend to display them sorted by date (earlier first) and only showing the year. I've used the truncate module (in my example, release: 4) and so far its showing only the first 4 characters, but I haven't succeed using orderby to sort it correctly.
Any pointers?
Also, in some items the released field comes back empty, any quick way to display just a "unknown" instead of a blank space?
Thanks!
<li ng-show="versions" ng-repeat="version in versions | filter: '!file' | orderBy: version.released">
{{version.released | release:4}} - {{version.format}} - {{version.label}}
</li>
Here is a date formatting filter I use. It takes a date and converts it into whatever format you wish, in your case, 'yyyy'. Bind the raw date stamp in your template and then 'orderBy' should work fine. This is how I always do it. Oh, you might not want the replace() function... that was specific to my last project.
.filter('DateFormat', function($filter){
return function(text){
if(text !== undefined){
var tempdate = new Date(text.replace(/-/g,"/"));
return $filter('date')(tempdate, "MMM. dd, yyyy");
}
}
})
You can show unknown by doing {{version.released || 'unknown'}}.
If you only want to show the year do this {{ (version.released | date : date : 'YYYY' ) || 'unknown'}}

Resources