Ignore Time Zone Angularjs - angularjs

Is there a better way to ignore an timezone in Angularjs:
"2014-01-18 14:30:00" Instead Of "2014-01-18 15:30:00"
function Scoper($scope) {
$scope.datum = "2014-01-18T14:30:00Z";
}
<div ng:app ng:controller="Scoper">
DateTime <br />
Angular: {{datum | date:'yyyy-MM-dd HH:mm:ss'}} <br />
</div>
http://jsfiddle.net/samibel/2rMXJ/


I was experimenting the same problem for a while. There is a timezone possible parameter to the date filter which I think should be the preferred solution, instead of making your own filter and append it. So, this is what worked for me:
{{ someAcceptedDateFormat | date : 'shortTime' : 'UTC' }}


I found this answer: Why does angular date filter adding 2 to hour?
Here is an example:
Just pipe another filter:
app.filter('utc', function(){
return function(val){
var date = new Date(val);
return new Date(date.getUTCFullYear(),
date.getUTCMonth(),
date.getUTCDate(),
date.getUTCHours(),
date.getUTCMinutes(),
date.getUTCSeconds());
};
});
In your template:
<span>{{ date | utc | date:'yyyy-MM-dd HH:mm:ss' }}</span>


I Have the solution:
app.filter('timezone', function(){
return function (val, offset) {
if (val != null && val.length > 16) {
return val.substring(0, 16)
}
return val;
};
});
template:
<span>{{ date | timezone | date:'yyyy-MM-dd HH:mm:ss' }}</span>
http://jsfiddle.net/samibel/n4CuQ/

Related

Angular date filter with date-string

I have a datestring in the following format: YYYY-MM-DD HH:mm:SS
I want to use the Angular date filter in the binding to change it to a YYYY-MM-DD HH:mm format.
I am trying {{data.date | date : "YYYY-MM-DD HH:mm"}}, but it doens't seem to work. Any ideas on what to change to get it to recognize my date format?

Try this
In Js file
angular.module('yourmodule').filter('datetime', function($filter)
{
return function(input)
{
if(input == null){ return ""; }
var _date = $filter('date')(new Date(input),
'MMM dd yyyy - HH:mm:ss');
return _date.toUpperCase();
};
});
In HTML
<span>{{ d.time | datetime }}</span>

AngularJs Select menu using ng-repeat, first item should display differently

Below code is fetching today's date and 7 more days e.g. 2016-02-01, 2016-02-02, 2016-02-03, 2016-02-04 etc.
but for today's date I do not want to display a date to user but word "Today" however, I want values in date format as I want to fill it into database while submitting form.
<select ng-model="item1" style=" width:100%; text-align:center;" ng-change="update()">
<option style="text-indent:30%" ng-repeat="item1 in IdeaMonth" value="{{item1.one | date:'yyyy-MM-dd' }}" >
{{item1.one | date:'dd-MM-yyyy' }}
</option>
</select>

You need your custom filter, where you can use moment or the same angular js date filter to get the necessary value:
function compareDateParts(a, b)
{
var aMSec, bMSec;
a = new Date(a);
b = new Date(b);
a.setHours(0,0,0,0);
b.setHours(0,0,0,0);
aMSec = a.getTime();
bMSec = b.getTime();
return aMSec == bMSec ? 0 : (aMSec > bMSec ? 1 : -1);
}
angular.module('app').filter('customDate', ['$filter', function($filter) {
return function(date, format) {
if(compareDateParts(date, new Date()) == 0) return "TODAY"
return $filter('date')(date, format);
};
}]);
Using {{date | customDate: 'dd-MM-yyyy'}}

AngularJS orderBy date

I have something like this:
<div ng-repeat="i in inv">
<p>{{i.dueDate}}</p>
</div>
I'd like to order by oldest date first. I know there's a way to do it but I can't figure it out. Can anyone help?
Here is the sample js:
$scope.inv = [
{
name: "Paul",
dueDate: "5/21/2014"
},
{
name: "Dan",
dueDate: "5/22/2014"
},
{
name: "Randy",
dueDate: "1/12/2015"
}
];

You have to define a customizer function, then use it in orderBy expression. For example:
$scope.dueDateFormatter = function(i) {
var dateParts = i.dueDate.split(/\//);
return dateParts[2]
+ '-' + (dateParts[0] < 10 ? '0' + dateParts[0] : dateParts[0])
+ '-' + (dateParts[1] < 10 ? '0' + dateParts[1] : dateParts[1]);
};
<div ng-repeat="i in inv | orderBy:dueDateFormatter">
<p>{{i.dueDate}}</p>
</div>
Demo. The function basically reorders the date string, so that Year comes first, Month next and Day last. If you use moment.js or similar library, you can use their parsers instead.

This should work for you:
<div ng-repeat="i in inv | orderBy:'-dueDate'">
<p>{{i.dueDate}}</p>
</div>

you need to convert your strings to YYYY-MM-DD format
<li ng-repeat="item in inv | orderBy:orderByDate">{{item.name}} </li>
$scope.orderByDate = function(item) {
var parts = item.dueDate.split('/');
var date = new Date(parseInt(parts[2], parseInt(parts[0]), parseInt(parts[1])));
return date;
};
Demo
http://plnkr.co/edit/o6fCDyiqkkU9YVWwZC09?p=preview

AngularJS date filter with condition

I use ng-bind and the date filter to output a time of a date.
<span ng-bind="ctrl.model.myDate | date:'HH:mm'"><span>
Now I would like to be able to switch the output between 12 and 24h format, with this filter: date:'HH:mm' and date:'hh:mm'
Therefore I have a property:
model.is24h= true
How can I insert a condition into the ng-bind expression to evaluate my property to output in 12h or 24h format?
Something like:
<span ng-bind="ctrl.model.myDate | {{ctrl.model.is24h: date:'HH:mm' || date:'hh:mm'}}"><span>

Just add a new filter with the variable as an argument
http://jsfiddle.net/HB7LU/13224/
HTML
<span ng-bind="myDate | newDate:is24h"></span>
<button type="button" ng-click="is24h = !is24h">Swap</button>
JS
myApp.filter('newDate', function ($filter) {
return function (input, arg) {
var hFormat = arg ? 'HH' : 'hh';
return $filter('date')(new Date(input), hFormat + '.mm');
};
});

Try to change your filter code for this condition.
angular.module('yourmodule').filter('date', function ($filter, $scope) {
return function (input) {
if (input == null) { return ""; }
if ($scope.is24h) {
return $filter('date')(new Date(input), 'HH:mm').toUpperCase();
}
return $filter('date')(new Date(input), 'hh:mm').toUpperCase();
};
});
html should be
<span ng-bind="ctrl.model.myDate | date"><span>

You can use trenary operator in directive parameter:
<span ng-bind="ctr.model.myDate | date:(ctrl.model.is24h?'HH':'hh')+':mm'"><span>

Date filter not working

Long story short, I'm trying to display a date that came from json.
This is what I tried:
{{ item.CreateDate | date }}
{{ item.CreateDate | date : 'MM/dd/yyyy' }}
This is what I get: /Date(1413010800000)/
I want to get 10/14/2014
What am I doing wrong? Thanks

Try
{{ item.CreateDate | msDate | date : 'MM/dd/yyyy' }}
And the filter
app.filter('msDate', function () {
return function (item) {
return new Date(parseInt(item.substr(6)));
};
});
Thanks #Brocco.

Resources