formatting date in angularJS table - angularjs

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

Related

Ionic: date pipe and local date

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

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.

Correct Way to Pass Dates from Angular to Web API 2

I have an Angular application that takes dates (date only not time) and posts them to a Web API 2 REST service. We are running into an issue when someone from India uses the application due to timezone issues.
Currently the Angular app is converting the date into ISO8601 format in UTC timezone and sending them to Web API. When the data is received on the Web API side, the date ends up being incorrect. If 6/21/2016 was put into the form, the date ends up coming over as 6/20/2016. The desired solution is to have the actual date value entered in the form be the date value received by the API.
One proposed solution is to treat the dates as strings instead of Dates and then just pass the date portion. This just seems like a hack to me and doesn't seem like the "correct" way of doing it.
What is the correct way of handling this situation?
Given the fact that the application has a lot of date field inputs is there an easy way to implement the solution across all Date input values?
The date format yyyy-MM-dd will be accepted in US / India so you can pass it so to your WebAPI. In JavaScript before posting you can alter the date like this.
$scope.MyDate = $filter('date')($scope.MyDate, 'yyyy-MM-dd', timezone);
If you want time too, the format will be yyyy-MM-ddTHH:mmZ

AngularJS layered date filter for database submission

I am having trouble with date submissions to a database. When date and time are both needed, I parse the values from the database as a timestamp, which gives me the value of the date and time in milliseconds since 1970. Using the AngularJS date filter, I am able to display the value in a user-friendly way.
$filter('date')(1380292078000, 'MM/dd/yyyy hh:mm a'); => 09/27/2013 10:27 AM
But this format as a timestamp when I send the value back to the database, my code throws an error. The database wants the date to be displayed in a different format.
java.lang.IllegalArgumentException: Timestamp format must be yyyy-mm-dd hh:mm:ss
So I add a second filter to convert the value date representation of the millisecond count (the user might have changed the value), but I am just getting a clone of the first date representation.
$filter('date')('09/27/2013 10:27 AM', 'yyyy-mm-dd hh:mm:ss') => 09/27/2013 10:27 AM
Here is a link to the fiddle I wrote to test this. Are we not able to stack filter conversions on top of each other? I had a thought to convert the first conversion result into milliseconds to use as a source for the second conversion, but I didn't see a method to accomplish this in the date documentation. If that would be the only solution, though, I am sure I could whip something up. Because Java has mostly deprecated functions to work with dates, I feel it would be simpler to handle this on the Javascript/AngularJS side.
The date filter will only work with a JSON date string (see source).
You can get around your problem by converting to a date object:
$scope.date2 = $filter('date')(new Date($scope.date), 'yyyy-MM-dd hh:mm:ss')
See updated fiddle
However... You should be validating and formatting this input on the server side. You can't trust data coming from a javascript application to be in the correct or expected format. I'd recommend just posting back $scope.date and allowing the server to format in your database format. By doing the yyyy-MM-dd hh:mm:ss formatting on the client-side, you're tightly coupling your user interface to database implementation and that's generally considered a bad idea.

Resources