How to convert date format in get api of all object

Question

I am new in angular, I am getting object through api

    data= [
  {
    "Id": 4,    
    "IssueDate": "2021-01-25T15:17:00.85",
    "ExpiryDate": "2021-01-25T15:25:40.263",
  },
  {
    "Id": 5,
    "IssueDate": "2021-01-25T15:25:40.263",
    "ExpiryDate": "2021-01-25T15:25:40.263"
  }
]

In this I am getting IssueDate and ExpiryDate I am getting in different format, I want to change it into DD-MM-YYYY so is there any way to change the format of both?

You can use DatePipe. This answer can help you. https://stackoverflow.com/questions/53928624/date-pipe-is-working-fine-in-html-interpolation-but-not-working-in-mat-datepicke/53930244#53930244 — Devang Patel, Jan 27 '21 at 07:06
Does this answer your question? [How to format a JavaScript date](https://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date) — Liam, Jan 27 '21 at 08:45

zainhassan · Accepted Answer · 2021-01-27T06:47:29.847

1

You can use date pipe if you want to show them on UI. Otherwise use

this.data = this.data.map(d => ({ ...d, IssueDate: new Date(d.IssueDate), ExpiryDate: new Date(d.ExpiryDate) }))

edited Jan 27 '21 at 06:47

answered Jan 27 '21 at 06:29

zainhassan

438
3
8

No, I want to change it in TS file – techguy Jan 27 '21 at 06:29
I have added the code @techguy – zainhassan Jan 27 '21 at 06:32
As you said I used this in html like this: {{ head.dataType ==='dropDown' ? tableData[head.mappedName]: head.dataType ==='date' ? tableData[head.mappedName] | date: 'dd-MM-yyyy' : tableData[head.mappedProperty] }} – techguy Jan 27 '21 at 06:34
But getting error: Parser Error: Conditional expression head.dataType ==='date' ? tableData[head.mappedName] | date: 'dd-MM-yyyy' : tableData[head.mappedProperty] requires all 3 expressions at the end of the expression [{{ head.dataType ==='dropDown' ? tableData[head.mappedName]: head.dataType ==='date' ? tableData[head.mappedName] | date: 'dd-MM-yyyy' : tableData[head.mappedProperty] }}] i – techguy Jan 27 '21 at 06:34
just add parenthesis around (tableData[head.mappedName] | date: 'dd-MM-yyyy') – zainhassan Jan 27 '21 at 06:36
for showing purpose its correct, but when I am patching this date to my datepicker, it showing me invalid date – techguy Jan 27 '21 at 06:38
because in ts file it is not in expected format – techguy Jan 27 '21 at 06:38
try this.data = this.data.map(d => ({ ...d, IssueDate: new Date(d.IssueDate), ExpiryDate: new Date(d.ExpiryDate) })) – zainhassan Jan 27 '21 at 06:42
which date picker are you using? – zainhassan Jan 27 '21 at 06:42
ngx-bootstrap ... – techguy Jan 27 '21 at 06:45
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227875/discussion-between-zainhassan-and-techguy). – zainhassan Jan 27 '21 at 06:47
it showing me like this Mon Jan 25 2021 15:17:00 GMT+0530 (India Standard Time) – techguy Jan 27 '21 at 06:57

sourav satyam · Answer 2 · 2021-01-27T06:45:59.390

I think you need to use the following in ts file with your response.

const data= [
  {
    "Id": 4,    
    "IssueDate": "2021-01-25T15:17:00.85",
    "ExpiryDate": "2021-01-25T15:25:40.263",
  },
  {
    "Id": 5,
    "IssueDate": "2021-01-25T15:25:40.263",
    "ExpiryDate": "2021-01-25T15:25:40.263"
  }
];

data.map((each_data) => {
   const issue_date = new Date(each_data.IssueDate);
   const exp_date = new Date(each_data.ExpiryDate);
   each_data.IssueDate = `${issue_date.getDate()}-${issue_date.getMonth()+1}-${issue_date.getFullYear()}`
   each_data.ExpiryDate = `${exp_date.getDate()}-${exp_date.getMonth()+1}-${exp_date.getFullYear()}`
  
});

console.log(data);

How to convert date format in get api of all object

2 Answers2