How do I convert a date into American format in Angular?

Asked

Viewed 2,154 times

7

I’m using a Json No Laravel 5 response, where I use Angular to display this data.

The date in Laravel is returned in format 2017-05-17 15:56:46. When trying to use filter date at the angle, continued displayed the same thing:

angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
 {{ '2017-05-17 15:56:46' | date: 'dd/MM/yyyy' }}
</div>

In cases of dates in the above format, as I should do to be able to convert to the format dd/MM/yyyy?

angularjs laravel date

  • Don’t you have the option to format the date directly in php? I was suffering a lot with this too and decided to format the date at the time of select.

  • @celsomtrindade thinking of trying to do the Carbon::setToStringFormat work, but it’s bone

  • I confess I don’t know much about Laravel, but what I did was SELECT DATE_FORMAT(data '%d/%m/%Y') as 'data'. Unless you need to work with the date directly in the view, then I don’t know if it would serve.

  • @My main concern is really to reach a standard. I could solve it like this, but every time I needed the formatted date, I would have to keep repeating it.

  • Yeah, that’s one of the cons of this method. Take a look at this one module, I used when I needed to work with several date manipulations, including showing messages like "17 minutes ago". Follows the same logic of the friend jbueno answer.

  • @celsomtrindade to thinking about this initiative as well. I suggest you post an answer with Angular Moment. It’s an excellent alternative!

Show 1 more comment

2 answers

7


That’s what you put in view is a string and not a date. The filter date can only be applied to objects of the type date.

angular.module('app', []);

angular.module('app').controller('mainController', mainCtrlFn);

function mainCtrlFn() {
    this.data = new Date();
    this.dataLaravel = new Date('2017-05-17 15:56:46');
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="mainController as mainCtrl">
 {{ mainCtrl.data | date: 'dd/MM/yyyy' }} <br>
 {{ mainCtrl.dataLaravel | date: 'dd/MM/yyyy' }}
</div>

3

As discussed in the comments, and also as an alternative response, we can use a module to improve the work with dates in Angularjs.

Would be the module Angular-Moment.

It has several benefits, such as:

  • Set the locale for the dates
  • Choose display mode via filter (similar to jbueno’s response) {{ date | amDateFormat:'MM.DD.YYYY HH:mm:ss' }}
  • Define difference in UTC, etc. {{ date | amUtcOffset:'+0300' }}
  • Create elapsed messages, e.g.: "17 min ago" {{ <span am-time-ago="date | amParse:'YYYY.MM.DD HH:mm:ss'"></span> }}

Among other great features!

Of course, it will depend on the need and scope of the project, but it is a good alternative.

Browser other questions tagged angularjs laravel date

You are not signed in. Login or sign up in order to post.