I want to change the date format from 10/07/2015(mm/dd/yyyy) to oct 7 ,2015 in angular js
i'm using {{'10/07/2015' | date:'longDate'}} and is giving me the same date '10/07/2015' as output
can any one help me with this?
As per the documentation, you have to format your date in a specific way for the date filter to work properly:
Documentation:
Date to format either as Date object, milliseconds (string or number) or various >ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter >versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone >is specified in the string input, the time is considered to be in the local >timezone.
Example ISO formatted:
<div>{{ "2015-10-07" | date:'longDate' }}</div>
Fiddle
Related
I've got this format of date coming from an api:
"dateTime": "2018-02-19 00:00:00.000-08:00"
I just want the days, month and year in the format: dd/MM/yyyy
I'm using this in the view:
<td>{{dado.dateTime | date:'dd/MM/yyyy'}}</td>
But it's shows the date extacly as it comes from the API. Without any formatting
OBS: Angular 1.6
You are missing the T in your original DateTime. For ISO8601 DateTime it should be "2018-02-19T00:00:00.000-08:00" as the value. That is what can be translated by the angular date filter as a DateTime, currently it can only be interpreted as a string.
From the documentation on the input:
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
If you do not have any control over the server/source then you have a couple of options:
Change the value of the date time string in the factory/service when you receive the data so it is ISO8601 compliant. This can be as simple as using a regex or string concatenation as long as the T character is added between the date and time. In this specific case you could take the first 10 characters as you probably want to completely ignore the time portion but that would not work where you do want to show or keep time as a part of the datetime.
Create your own filter that then calls through to the built in date filter once you format the input correctly.
My problem is styling a date object properly. I would like to style the day month year and sometimes day of the week. If the date object is static it would be simple. The date format is passed in and usually takes in the account of localization so I don't know what the format will look like. I could be given mm/dd/yyyy or mm/dd/yyyy (Simple case). Currently, we just pass it through angular date filter and it produces the correct date, but I can't style the month to be bold and blue for example.
Is there an easy way to parse a date with the format of dd/mm/yyyy and gives me:"12/12/1988"
Angular ships with a Date filter.
<p>{{'1491941202157' | date:'dd/MM/yyyy'}}</p> => 11/04/2017
Pair that up with a directive using the $filter in the controller, or simply split the string on / and wrap in style-able nodes like <span>, for example.
More here: https://docs.angularjs.org/api/ng/filter/date
I have an object which I get from a server, and this object has a property: obj.year: "2017", for example. The property is a number.
I need to display only the last two digits of the year.
When I format it in the HTML like this:
{{obj.year | date : 'yy'}}
it shows :70. I tried with all kind of built Angular year filters and I tried it with a moment js formatting function:
function formatYear(year) {
return moment(year).format('YY');
}
But it still returns the year 1970.
I don't get why it returns this year, and this happens only when it's being formatted? If I don't apply any formatting on it, it returns the normal value of the object - 2017
The documentation for the date filter explains why this happens. It's expecting the value you supply to be a Date object, a date string, or a number in milliseconds.
Here is their description:
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
The reason you are getting 1970 is b/c the date filter is taking your year, 2017, and interpreting it as the number of miliseconds since the epoch or unix time.
To make the date filter work, you can just convert your year value into a Date (or similar approach when using moment):
var date = new Date(obj.year, 0,1); // Jan 1
The reason why {{obj.year | date : 'yy'}} outputs 70 is because you are passing the number 2017 to angular's date filter and so doing the equivalent of new Date(2017) which returns a date and time that is 2017 milliseconds from 1970-01-01 00:00:00:000 or to be precise 1970-01-01 00:00:02:017. So when you run that through angular's date filter with the yy formatting string you get the last two digits of the year which is of course 70.
To offer an alternative solution, you could use angular's limiTo filter:
{{ obj.year | limitTo : 2 : 2 }}
As other answers stated you are getting 70 instead of 17 because angular date filter accepts:
Date object, milliseconds (string or number) or various ISO 8601 datetime string
So your input is interpreted as number of milliseconds since 1 January 1970 00:00:00, basically it is equivalent to:
console.log(new Date(2017)); // 1970-01-01T00:00:02.017Z
Your formatYear function using moment has the same logic, so it gaves the same wrong result. If you use moment parsing specifying format (moment(String, String); instead of moment(Number);), your input will be treated as string and you will have the right output:
function formatYearBad(year) {
// uses moment(Number)
return moment(year).format('YY');
}
function formatYearOk(year) {
// uses moment(String, String)
return moment(year, 'YYYY').format('YY');
}
console.log( formatYearBad(2017) ); // 70
console.log( formatYearOk(2017) ); // 17
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
To use the right moment logic inside you angularjs view, you have to use angular-moment library. You can use amParse to specify the format of your input string (four digit year in your case) and amDateFormat to specify output format (two digit year in your case). Here a working example:
angular.module('MyApp',['angularMoment'])
.controller('AppCtrl', function($scope) {
$scope.obj = {
year: "2017"
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-moment/1.0.1/angular-moment.min.js"></script>
<div ng-app="MyApp" ng-controller="AppCtrl">
{{obj.year | amParse:'YYYY' | amDateFormat:'YY'}}
</div>
I have datetime value on database as follow
But following angularJS code display wrong hour in View
<i title="Baxıldı {{item.ViewedDate | date: 'dd.MM.yyyy hh:mm:ss Z'}}"></i>
for example:
I think this error depends on localization, in my country is UTC+4, so 4 hours added to current value.
Please help to solve this problem.
You can add timezone as the third argument when you're using the date filter.
{{ date_expression | date : format : timezone}}
Here's an example if the dates in your database in stored in UTC.
<i title="Baxıldı {{item.ViewedDate | date: 'dd.MM.yyyy hh:mm:ss Z': 'utc'}}"></i>
From the docs:
Timezone to be used for formatting. It understands UTC/GMT and the
continental US time zone abbreviations, but for general use, use a
time zone offset, for example, '+0430' (4 hours, 30 minutes east of
the Greenwich meridian) If not specified, the timezone of the browser
will be used.
I'm trying to use Angular's date/time formatting with this string
2015-01-20 16:49:07+00:00
{{ myDate | date : 'medium' }}
However, it doesn't seem to be working? Is the original string messed up?
According to the angular date filter docs:
Date to format either as Date object, milliseconds (string or number) or various ISO 8601 datetime string formats (e.g. yyyy-MM-ddTHH:mm:ss.sssZ and its shorter versions like yyyy-MM-ddTHH:mmZ, yyyy-MM-dd or yyyyMMddTHHmmssZ). If no timezone is specified in the string input, the time is considered to be in the local timezone.
You'll notice that for an ISO 8601 date, you need a T before the time:
"2015-01-20T16:49:07+00:00"
http://jsfiddle.net/p84zjy6t/
The correct usage is:
{{ date_expression | date : format }}
To check all format options check the docs