I want to show in a view of an angular project a human friendly date format, and I saw that angular has a filter to do so, but the input date needs to have a certain format.
The desired output format to be seen in the view is the following: "dd/MMMM/yyyy hh:mm:ss"
Currently, I have on a Database the following timestamp format:
"2016-08-15 12:34:34"
How can I format this type of timestamp so that angular can intepret it and format it as desired?
Thanks a lot!
You can parse the date to a javascript date and then use the date filter in Angular to show it in the format you want (if you can't use the date filter on the date from your database directly).
You could do this as a filter to make it easier:
myApp.filter('formatted', function() {
return function(value) {
return new Date(value);
}
});
In your html you could then add this filter before the date filter:
Filter: {{ vm.dateToFormat | formatted | date: 'dd/MMMM/yyyy hh:mm:ss' }}
If Angular is having trouble parsing the string from the database on its own you could just use JavaScript Date.parse("2016-08-15 12:34:34") to return you a date that Angular will interpret properly.
You could just use the inline filter:
Example:
<span>{{vm.Date | date: 'dd/MMMM/yyyy hh:mm:ss'}}</span>
EDIT: To be clear, you post doesn't clarify if that timestamp is a string or not, so you may have to parse it accordingly. I see the other posters just assumed it was a string.
Related
I have an api returning timestamp variable. When I print in AngularJs it shows as 1488195848000.But I want that to be displayed as 2017-02-28 14:49:48(In Timestamp format)
How do I convert in controller?
If you want to convert that variable in HTML,
{{variable | date : 'yyyy-MM-dd HH:mm:ss'}}
And in case of JS,
$filter('date')(variable, 'yyyy-MM-dd HH:mm:ss')
Note: In case of JS, do not forget to add $filter as dependency.
You can format date in AngularJS using the pipe operator and the date filter
<span>{{1488195848000| date:'yyyy-MM-dd HH:mm:ss'}}</span>
In the controller you need to make use of filter function to format the date
like
var _date = $filter('date')(_date, 'yyyy-MM-dd HH:mm:ss')
I am new to angular js .
I am trying to give some date format like Nov-24-2016, but its not working at all .
Below is my code.
{{ x.created | date:" MM-d-y" }}
Here I want this format Nov-24-2016
and x.created value = 2016-11-24 08:02:21
Any suggestion?
Thank you
you can create a custom
.filter('datetime', function($filter){
return function(input){
if(input == null){ return ""; }
var _date = $filter('date')(new Date(input),'MM-dd-yyyy');
return _date.toUpperCase();
};
});
{{ x.created | datetime }}
Have a look at the documentation:
https://docs.angularjs.org/api/ng/filter/date
x.created must be either a Date object or a timestring with milliseconds since UTC epoch.
So either create a manual filter for it or parse your datestring to a Date object.
To use date Pipe x.created must be date object or a number (milliseconds since UTC epoch) or an ISO string as per DatePipe
{{ x.created | date: "MMM-d-y" }} renders to Nov-24-2016
Btw: 2016-11-24 08:02:21 seems not to be a valid ISO string, https://www.w3.org/TR/NOTE-datetime. You could check this.
I had similar problem. It's fix after 2 steps, change document encoding to utf-8 without BOM and rewrite manually data of time. Like this - date:
2013-12-02T17:57:28.556094Z
I have a javascript string in the following format:
2016-06-22T14:47:29.689358
How would I use ng-moment to parse the string into a moment object and then format it inside my view?
https://github.com/urish/angular-moment
Pseudocode:
$scope.time = "2016-06-22T14:47:29.689358";
<span am-time-ago="time | amParse:'YYYY.MM.DD HH:mm:ss'"></span>
It seems like time needs to be converted into a Date object before it is passed to ng-moment.
You don't need a date at all, and in fact you shouldn't use the date object's parser as it behaves in odd ways. You just have the wrong format specified for the date you have.
<span am-time-ago="time | amParse:'YYYY-MM-DDTHH:mm:ss.SSS'"></span>
That should be all you need.
For more information about why dates parse unreliably, you can see this question.
Looking into the documentation you can go with
amFromUnix filter: Converts a unix-timestamp (seconds since 1/1/1970) into a moment object. Example:
<span am-time-ago="message.unixTime | amFromUnix">
To get the unixTime from your date string just go with the following:
var unixTime = new Date("2016-06-22T14:47:29.689358").getTime();
Looks like from it just wants a moment object.
$scope.time = moment("2016-06-22T14:47:29.689358");
1st attempt, did this:
{{ leads.pgDate | date:'MM/dd/yyyy' }}
I've also tried:
" | date:"MM/dd/yyyy": 'UTC' "
2nd attempt, went to leadsCtr.js and found
$scope.leadsGridOptions = {
columnDefs: [
{
field: 'expected',
displayName: 'Expected Close Date', width: 150, type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\''
}
]
}
Added 'type:''date'' and changed cellFilter from \'sort\'
Observations:
displayName: 'Expected Close Date' BUT
the date header in HTML is 'Date of Purchase' - that's why the 2nd attempt didn't work. Also, cellFilter is being overridden, that addition didn't alter anything either.
{{leads.pgDate.toString()}}
adding toString didn't change anything- Maybe date is a string?!
New Problem:
Cannot find the object that ng-repeat is using to populate the fields to see if the date really is a string and I can parse it.
Questions:
If date is coming in as String, will the angular filter not work? Is there anyway to override {{inside the HTML}} ?
Answer:
Used Jimbrooism's suggestion. The wrapper is converting the value back into a date format and the filter works.
Try This
{{convertDate(leads.pgDate) | date:'dd/MMM/yyyy'}}
//JS
$scope.convertDate = function convertDate(date){
return new Date(date);
};
if you getting date as a string yyyy-mm-dd then convert this into java script date obj.
After convert it into date obj it is easy to convert into any format.
for mm-dd-yyyy format see this link
How to get current formatted date dd/mm/yyyy in Javascript and append it to an input
I suggest to use moment and angular moment for date related stuff.
In the controller:
$scope.date = moment(<date>, 'YYYY/MM/DD');
In the view:
<p data-ng-bind="date | amDateFormat : 'MM/DD/YYYY'"></p>
I have a date field which contains data coming in from the database as 2015/07/31 13:01:53.180z.
Datetime is stored in UTC on database.
My code looks like this:
var startDateTime = Ext.util.Format.date(StartDateTime, 'm/d/y g:i:s A');
But the output I get is the conversion of UTC to IST(Indian).I checked on Chrome,Mozilla and IE.
I got same output all the time
Does ExtJs does this? Because I haven't wrriten any method for conversion.
I use ExtJs 4.1.1
I would appreciate any help on this.
Timezone is appended in the string->JS Date conversion.
To parse the date from database without timezone conversion you should use the Ext.Date.parse explicitly, not automatically through model field type 'date' or simply JS constructor new Date().
For example:
var db_date = '2015/07/31 13:01:53.180z',
js_date = Ext.Date.parse(db_date.substring(0,db_date.length-5), 'Y/m/d H:i:s'),
date_to_show = Ext.util.Format.date(js_date, 'm/d/y g:i:s A');
Obviously "substring" must be replaced by something better, for example you could format db date (cutting timezone part) in the web service serialization.
If you achieve to clean the date string in the web service you can also add "dateFormat" attribute to model fields to parse date correctly into models.