AngularJS Date Format Issue

Question

On trying the inbuilt angularjs date filter to format the date string, I am not getting the formatted date for "2016-05-17 14:45:59+04",

See the plunkr https://plnkr.co/edit/VzRpNFkrWasv3nPlIQyg?p=preview ,

Please help me in understanding why it is working and I am getting the proper date object when I parse the string "2016-05-17 14:45:59+04" using see the screenshot

Thanks in advance for any help.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-example101-production</title>
  

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  
  
  
</head>
<body ng-app="">

<span ng-non-bindable>{{2016-05-17 14:45:59+04 | date:'yyyy-MM-dd'}}</span>:
<span>{{'2016-05-17 14:45:59+04' | date:'yyyy-MM-dd'}}</span><br>

</body>
</html>

<!-- 
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

Use Javascript Date object instead of passing it as a string to filter. — Yogesh
– Yogesh, Commented Jun 6, 2016 at 11:37
@Yogesh: Thanks Yogesh It works. I created custom filter and parsed before giving to the inbuilt date filter like "return $filter('date')(Date.parse(dateString), 'dd-mm-yyyy' );" — Mohamed Hussain
– Mohamed Hussain, Commented Jun 6, 2016 at 11:48

Yogesh · Accepted Answer · 2016-06-06 15:54:12Z

3

Use Javascript Date object instead of passing it as a string.

// somewhere in the controller

$scope.dt = new Date('2016-05-17 14:45:59+04');

// in html

<span>{{dt | date:'yyyy-MM-dd'}}</span>

You can also write custom filter to do it, which you have already done.

Key point here is using Javascript Date object

answered Jun 6, 2016 at 15:54

Yogesh

1,5952 gold badges20 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

marsze Over a year ago

What a surprise it works with Date. It solves the question, but does not answer it. Of course you're right, it's not good style to work with string literals to represent dates.

Alexander Kravets · Accepted Answer · 2016-06-06 11:45:01Z

2

You should use the ISO 8601 compliant date/time format:

<span>{{'2016-05-17T14:45:59+04:00' | date:'yyyy-MM-dd'}}</span><br>

answered Jun 6, 2016 at 11:45

Alexander Kravets

4,4351 gold badge19 silver badges15 bronze badges

Comments

marsze · Accepted Answer · 2016-06-06 11:40:08Z

1

Quote from the link that you provided, under Usage > Arguments:

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.

So, choose a different format for your date string, for example:

2016-05-17T14:45:59.000+0400

answered Jun 6, 2016 at 11:40

marsze

17.5k6 gold badges59 silver badges67 bronze badges

Comments

user5529089 · Accepted Answer · 2017-03-03 07:36:02Z

0

If you want to to avoid being forced to do new Date() in your controller each time you have to handle date, you can use a filter that will automatically transform your date into a new Date():

angular
    .module('myApp')
    .filter('toNewDate', toNewDate);

function toNewDate() {
    return toNewDateFilter;

    ////////////////

    function toNewDateFilter(date) {
        return new Date(date);
    }

}

Now you can use it through your application and save lots of time (e.g. when you receive dates from webservices):

<span class="date">{{post.created_at| toNewDate | date: 'dd MMMM yyyy'}}</span>

answered Mar 3, 2017 at 7:36

user5529089

111 bronze badge

Collectives™ on Stack Overflow

AngularJS Date Format Issue

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related