Date format change in frontend

Viewed 116

From backend I am getting an array of objects(leavedays)-

      var leavedays= 
      [{"_id":"62d544ae9f22d","season":2022,"name":"LEAVEDAY1","dateFrom":"2022- 
      07-26T00:00:00.000Z","dateTo":"2022-07-27T05:30:00.000Z",}, 
      {"_id":"62d544ec3339f22e","season":2022,"name":"LEAVEDAY2","dateFrom":"2022-07- 
      20T00:00:00.000Z","dateTo":"2022-07-21T00:00:00.000Z",}];

In app.controller I defined it -

      $scope.leavedays= leavedays;
      for (let i = 0; i < $scope.leavedays.length; i++) {
         var dateFrom = new Date($scope.leavedays[i].dateFrom);
         var yearFrom = dateFrom.getFullYear();
         var monthFrom= dateFrom.getMonth() + 1;
         var dtFrom = dateFrom.getDate();

         if (dtFrom < 10) {
         dtFrom = "0" + dtFrom;
         }
         if (monthFrom < 10) {
         monthFrom = "0" + monthFrom;
         }
         var myDateFrom = dtFrom+"-" + monthFrom +"-"+yearFrom;
         console.log(myDateFrom);
         $scope.leavedays[i].dateFrom = myDateFrom;
   }
   for (let i = 0; i < $scope.leavedays.length; i++) {
        var dateTo = new Date($scope.leavedays[i].dateTo);
        var yearTo = dateTo.getFullYear();
        var monthTo= dateTo.getMonth() + 1;
        var dtTo = dateTo.getDate();

        if (dtTo < 10) {
            dtTo = "0" + dtTo;
        }
        if (monthTo < 10) {
            monthTo = "0" + monthTo;
        }
        var myDateTo = dtTo+"-" + monthTo +"-"+yearTo;
        console.log(myDateTo);
        $scope.leavedays[i].dateTo =myDateTo;
    }

In frontend I want to show it in a table & date format will be (26-07-2022),for that I used in frontend-

      <tr dir-paginate="leaveday in leavedays">
            <td>\{{leaveday.name}}</td>
            <td>\{{leaveday.dateFrom}}</td>
            <td>\{{leaveday.dateTo}}</td>
      </tr>

but instead of '26-07-2022' this date format, in front I am getting date like this: '2022-07-26T00:00:00.000Z.Can someone please help me to get the date in '26-07-2022' this format?

1 Answers

AngularJS has a date filter built-in to format dates in templates.

In your case:

<tr dir-paginate="leaveday in leavedays">
   <td>\{{leaveday.name}}</td>
   <td>\{{leaveday.dateFrom | date: 'dd-MM-yyyy')}}</td>
   <td>\{{leaveday.dateTo | date: 'dd-MM-yyyy'}}</td>
</tr>
Related