Ionic: date pipe and local date - angularjs

I want to print creation dates for news posts. I used the date pipe of angular.
{{news.created_at | date:'shortDate'}}
I saw after testing on my smartphone (language: german), that the dates are in english format (e.g. 10/26/2017).
Is there an option to format date in ionic according to the device language?

You can apply date filter like this in your required format.This is helpful method if your app is mostly for some particular countries you can change date format for them and let other countries pick up the default case.
<p>Date = {{ today | date : "dd.MM.y" }}</p>
Consider This link for more info
All you need to do is:
Use
navigator.language || navigator.userLanguage
To get the device language
Then based on language create a date variable to store the format for that language like $scope.dateFormat = "dd.MM.y"
And then use it in your html like | date : dateFormat

Related

formatting date in angularJS table

I am creating a web app in angularJS I have a date in the following format
"response.data[0].Date = "/Date(1539887400000)/"
I can convert this date into normal MM-DD-YYYY with moment, like this
moment(response.data[0].Date).format('DD-MM-YYYY');
but while binding the data into table with ng-repeat I am not able to achieve this
I did something like this
<td>{{d.Date| date:'DD-MM-YYYY' }}</td>
but in table it still showing like /Date(1539887400000)/
what I need to do to convert /Date(1539887400000)/ into DD-MM-YYYY
Your issue is because the date filter you are using is an AngularJS defined one, and is designed to work on date objects, the number of seconds since the epoch, or specifically formatted strings (see: https://docs.angularjs.org/api/ng/filter/date). In your case, you are passing in a string "Date(1539887400000)", which doesn't adhere to any of specific formats that the date argument of the filter expects. Here are a few ways I would think about solving this:
You could initialize the date option after you have fetched the data from the database. An example would be: $scope.testDate = new Date(1539887400000);. You can then use the regular angular date filter on this object: {{testDate | date: 'dd-MM-yyyy'}}.
You can use angular-moment (link: https://github.com/urish/angular-moment), which has more features than the regular angularJS date filter. You can then use the amDateFormat and pass your string in, like so: {{d.Date | amDateFormat: 'DD-MM-YYYY'}}
You could parse out the number from the string that you currently have. Since the regular angularJS date filter can accept a number (seconds since epoch) as it's argument, it will properly format it.
See an example plunker here showing some of these in action: https://plnkr.co/edit/quCvL3GhSux8ctYQqAwA

Style each section of a date after it been formatted with the correct date format

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

Compare two dates in Angular

I want to compare two dates. I'm new in Angular
The two dates are in same format mm/dd/yyyy
<pre>{{CurrentDate | date:'MM/dd/yyyy' }}</pre>
<pre>{{cmp_actl_del_date }}</pre>
these three are my dates. I want to check cmp_actl_del_date > the current date.
JavaScript uses objects to store date values. When you want to compare if two dates are equal don't do this like date1 === date2. That will just tell you if the two variables reference the same object.
To check if two dates are equal use the getTime() method of the date object. Like this:
date1.getTime() == date2.getTime()
Be careful because any difference in seconds will fail to match the dates.
Now ng-if will accept AngularJS expressions.
Ensure that both variables are valid JavaScript date objects.
I recommend that you use the moment javascript library for date processing. It makes working with dates a lot easier.

Angular localization problems with number and date format

I am trying to format a date based on localisation and have the locale files setup correct so when using date format of shortDate I get the difference between UK and US format.
However we need the date to show the full year 2016 and not 16.
If I code it as dd MM yyyy then that gives me the correct UK format but when toggling to US mode the filter keeps it in that dd MM yyyy format.
How can I enable the date to be of type day month year for UK and month day year for US etc ?
Try https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
// US English uses month-day-year order
console.log(date.toLocaleDateString('en-US'));
// → "12/19/2012"
// British English uses day-month-year order
console.log(date.toLocaleDateString('en-GB'));
// → "20/12/2012"
Note this is not IE friendly like most of html5 and ES6 :v.
other way is to use http://momentjs.com/

Angular js Date Formatting

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

Resources