Change date format from yyyy/MM/dd to MM/dd/yyyy in Angular

Question

1st attempt, did this:

{{ leads.pgDate | date:'MM/dd/yyyy' }}

I've also tried:

" | date:"MM/dd/yyyy": 'UTC' "

2nd attempt, went to leadsCtr.js and found

$scope.leadsGridOptions = { 
  columnDefs: [ 
    {
      field: 'expected',
      displayName: 'Expected Close Date', width: 150, type: 'date',
cellFilter: 'date:\'MM/dd/yyyy\'' 
    }
  ]
}

Added 'type:''date'' and changed cellFilter from \'sort\'

Observations:

displayName: 'Expected Close Date' BUT the date header in HTML is 'Date of Purchase' - that's why the 2nd attempt didn't work. Also, cellFilter is being overridden, that addition didn't alter anything either.

{{leads.pgDate.toString()}}

adding toString didn't change anything- Maybe date is a string?!

New Problem:

Cannot find the object that ng-repeat is using to populate the fields to see if the date really is a string and I can parse it.

Questions:

If date is coming in as String, will the angular filter not work? Is there anyway to override {{inside the HTML}} ?

Answer:

Used Jimbrooism's suggestion. The wrapper is converting the value back into a date format and the filter works.

I was trying to edit your post to improve formatting (use markdown for *code* blocks, not *quote* blocks), but that also required some interpretation / reformatting that may affect the code itself, so I stopped. Please try to edit your post, check the formatting help, and use code-formatting, for readability. — Jeroen, Apr 26 '16 at 05:21
I'm not sure I understand.. should I have the comments outside the block? — isosceles, Apr 26 '16 at 19:02
If you use backticks (inline code) or four spaces indenting (blocks of code) instead of `>` characters (blockquotes) your code will be formatted in a much more readable way. Check out the [markdown help](http://stackoverflow.com/editing-help). — Jeroen, Apr 26 '16 at 19:32
I tried backticks and indenting.. it refuses to show any formatting. Took off the highlights instead, incase that was distracting and added my solution to make it more useful. — isosceles, Apr 29 '16 at 01:27
I've tried to show how you could use markdown for formatting. If you go to [the revision history](http://stackoverflow.com/posts/36855789/revisions) and click "`side-by-side markdown`" at the top of revision 3 you'll see what I had to change. Good luck to you and thx for helping us improve SO! :-) — Jeroen, Apr 29 '16 at 05:30

score 0 · Accepted Answer · answered Apr 26 '16 at 05:26

0

Try This {{convertDate(leads.pgDate) | date:'dd/MMM/yyyy'}}

//JS

$scope.convertDate = function convertDate(date){
    return new Date(date);
};

answered Apr 26 '16 at 05:26

byteC0de

5,153
5
33
66

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

if you getting date as a string yyyy-mm-dd then convert this into java script date obj. After convert it into date obj it is easy to convert into any format. for mm-dd-yyyy format see this link How to get current formatted date dd/mm/yyyy in Javascript and append it to an input

edited May 23 '17 at 12:31

Community

1
1

answered Apr 26 '16 at 05:26

Bhanu

44
2

score 0 · Answer 3 · answered Apr 26 '16 at 05:38

0

I suggest to use moment and angular moment for date related stuff.

In the controller:

$scope.date = moment(<date>, 'YYYY/MM/DD');

In the view:

<p data-ng-bind="date | amDateFormat : 'MM/DD/YYYY'"></p>

answered Apr 26 '16 at 05:38

Aman Gupta

3,627
4
40
64

Change date format from yyyy/MM/dd to MM/dd/yyyy in Angular

3 Answers3