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>
Related
I have json object array binded to a table. Objects have a date column which is in date format but string. I need to change date format.
I tried;
<tbody>
<tr ng-repeat="row in table_data">
<td>{{row.availabledate | date:'MMMM dd, yyyy'}}</td>
</tr>
</tbody>
But, since it is string it is not formatted. I dont want to convert it in a loop for the sake of performance. Is there a way to convert this string to date and then format it on html part?
One way is to make your own filter, then use the date filter.
This crude/raw filter expects a YYYYMMDD string and creates a date object from it that you can then use angular's date filter on.
app.filter('strToDate', function() {
return function(input) {
var year = input.substring(0,4);
var month = input.substring(4,6);
var day = input.substring(6,8);
// Do filter work here
return new Date(year,month,day);
}
});
and then
<td>{{row.availabledate | strToDate | date:'MMMM dd, yyyy'}}</td>
Here's a Plunker link with working example: https://plnkr.co/edit/hn5StpktiMLq2gWHAszu?p=preview
You could also just make your filter return the formatted date.
Another way, doing all the work inside the filter:
app.filter('strToDate', function($filter) {
//1. date value
//2. the format input by user
return function(input, format) {
//Create the date object
var year = input.substring(0,4);
var month = input.substring(4,6);
var day = input.substring(6,8);
var newDate = new Date(year,month,day);
// return the format selected
return $filter('date')(newDate , format)
}
});
You can use the filter like this:
<td>{{row.availabledate | strToDate :'MMMM dd, yyyy'}}</td>
I am trying to filter date in ngTable based on the given format d MMM yyyy HH:mm:ss. I followed this answer and created a custom filter, but it does not take the given format instead d MMM, yyyy.
How can I have filter on ngTable to filter dates in a given format? Here is my plunker
ngTable
<td data-title="'Start Date'" class="text-center" header-class="text-left" filter="{ 'start_date': 'text' }" sortable="'type'">{{item.start_date| date: 'd MMM yyyy HH:mm:ss'}}</td>
<td data-title="'End Date'" class="text-center" header-class="text-left" filter="{ 'end_date': 'text' }" sortable="'type'">{{item.end_date| date: 'd MMM yyyy HH:mm:ss'}}</td>
Custom filter
filter('customUserDateFilter', function($filter) {
return function(values, dateString) {
var filtered = [];
if (typeof values != 'undefined' && typeof dateString != 'undefined') {
angular.forEach(values, function(value) {
var source = ($filter('date')(value.start_date)).toLowerCase();
var temp = dateString.toLowerCase();
//if ($filter('date')(value.start_date).indexOf(dateString) >= 0) {
//if (temp.indexOf(" ") >=0)
//debugger;
if (source.indexOf(temp) >= 0) {
filtered.push(value);
}
});
}
return filtered;
}
})
You have to be careful when you are changing the format of the date. This is because the filter formats the date which has to be the same format as shown in the table to ensure correct functionality:
var source = ($filter('date')(value.start_date)).toLowerCase();
must be changed to this:
var source = ($filter('date')(value.start_date, 'd MMM yyyy HH:mm:ss')).toLowerCase();
Here is the working plunkr.
I have a date in an HTML template binding:
{{data.timestamp | date: "yyyy-MM-dd HH:mm:ss Z" : UTC}}
and I want to use it in Javascript
$filter('date')(data.timestamp,'yyyy-MM-dd HH:mm:ss Z', UTC);
But it didn't work in javascript. Any ideas what need to change in Javascript to make it works?
You try redefine standard filter?
For create new filter use new filter module:
.filter('newDate', [function() {
return function(date) {
//date format;
return date.getDate() + '-' + (+date.getMonth() + 1) + '-' + date.getFullYear();
};
}])
Template:
//time = new Date;
{{time | newDate}}
Result:
3-9-2015
I am using moment.js and have the below code in angularJS that displays dates. If the date is Today and Yesterday it works well.
For example: If today's date is 2/6/2015, it displays correctly as Today and for 2/5/2015 it displays correctly as Yesterday.
But if the date is 2/4/2015 it is showing up as 2015-02-04T11:20:00-06:00 and not as the way I want. If the date is 01/28/2015 it formats correctly as specified in sameElse. I thought the sameElse should have taken care of the days that are not today and yesterday.
I am getting the date from the server in utc format. Example: 02/05/2015 18:01:04:946
What am I missing?
Here is the code:
controller:
$scope.calDate = function(val) {
var d_val = moment(val + ' +0000','MM/DD/YYYY HH:mm:ss:SSS Z').format('LLL');
moment.locale('en', {
'calendar' : {
lastDay : '[Yesterday]',
sameDay : '[Today]',
sameElse : 'MMM D, YYYY'
}
});
return moment(new Date(d_val)).calendar();
}
html:
<div>{{calDate(list.dateVal)}}</div>
You can try
moment.locale('en', longDateFormat : {
LT : 'MMM D YYYY'
},
'calendar' : {
lastDay : '[Yesterday]',
sameDay : '[Today]',
sameElse : 'LT'
}
});
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/