CODEWITHSUNDEEP
javascriptangularjs
divakar
divakar

Reputation: 1379

Date formatting AngularJS to display only the day and month

I am completed newbie to Angular. So I have date value for created_at. which is 

2008-04-25 00:00:00

I want to get only the day similarly month in English. I have tried the following to make sample to get Year alone. But the filter not seems to be working. What am I doing wrong?

<h2>Recent Study</h2>
    <ul ng-repeat="x in names">
         <li>
            <div class="date">
            <span class="day">{{ x.created_at |  date : 'yyyy' }}</span>
            <span class="month">Jul</span>
            </div>
            <p><a href="#">{{ x.study_description }}</a></p>
        </li>

    </ul>

Upvotes: 1

Views: 13408

Answers (4)

Nitsan Baleli
Nitsan Baleli

Reputation: 5458

You need to convert the date to seconds, and use a custome filter:

app.filter('toSec', function($filter) {
  return function(input) {
      var result = new Date(input).getTime();
      return result || '';
  };
});

and use it in your HTML like this:

{{ '2008-04-25 00:00:00' |  toSec | date:'EEEE'}}

result:

Friday

Angular gives you the option to create a Custome Filter

Here's a working example that achieves what you need using a custome filter.

Upvotes: 9

divakar
divakar

Reputation: 1379

I have found the answer. The problem is simple. We should convert the mysql date time to javascript date time then only you can format it in javascript.

so my format is:2008-04-25 00:00:00

  app.filter('format', function () {
          return function (item) {
               var t = item.split(/[- :]/);
           var d = new Date(t[0], t[1]-1, t[2], t[3], t[4], t[5]);
           var time=d.getTime();                 
                   return time;
          };
        });

I have converted the mysql to javascript and then to millisecond then applied my filter its working.This may be not efficient. Its working in great manner. Hope this helps someone.

so my html:

 <li  ng-repeat="x in names">
                <div class="date">
                <span class="day">{{ x.created_at | format | date:'d'}}</span>
                <span class="month">{{ x.created_at | format | date:'MMM'}}</span>
                </div>
                <p><a href="#">{{ x.study_description | makeUppercase}}</a></p>
            </li>

Its working fine. @Nishanth answer is giving me undefined. I have upvoted it since its seems working fine for some people. The date format support vary on browser tools too.

Upvotes: 0

user3812457
user3812457

Reputation: 157

I hope your getting the input as time stamp ,in your code just change the filter to get the only day 

<h2>Recent Study</h2>
    <ul ng-repeat="x in names">
         <li>
            <div class="date">
              <!-- getting only day  -->
            <span class="day">{{ x.created_at | date:'dd '}}</span>
                <!-- getting month name and  day only -->
            <span class="month">{{ x.created_at |  date:'MMM-dd '}}</span>
            </div>
            <p><a href="#">{{ x.study_description }}</a></p>
        </li>

    </ul>

here date:'dd ' gives Day in month, padded (01-31) and 

date:'MMM-dd ' gives Month in year (Jan-Dec) and above day in month.

Upvotes: 1

Rusty
Rusty

Reputation: 329

created_at's formatting isn't compatible.

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.

Cited from https://docs.angularjs.org/api/ng/filter/date

for example "2008-04-25T00:00:00" would work.

Upvotes: 1

Related Questions