Save the date in and display it in the good format - html

Question

I am programming a crud application with a creation date. when I add a new object, the date is saved on the database with a good format :
Database
Now when the date is displayed on the table, it shows me like this :
enter image description here
I found a solution to show it as a good format with {{Rec.Date.slice(6,-2) | date:'dd/MM'}}
The issue is that when I tried to add a datepicker to make a seach with the date variable, the search does not match anything even if I give it a date already existed on the base. I am pretty sure that the issue is with date format but I don't find any solution to format it when the save of a new reclamation is done.
reclamations-by-date-controller.js :
(function () {
'user strict';
angular
.module('app')
.controller('ReclamationsByDateController', ['$scope', 'ReclamationsByDateService', function
($scope, ReclamationsByDateService) {
// Call GetAllReclamations function to init the table
GetAllReclamations();
// Get reclamation list function
function GetAllReclamations() {
var getRecData = ReclamationsByDateService.getReclamations();
getRecData.then(function (reclamation) {
$scope.reclamations = reclamation.data;
}, function () {
alert('Error in getting reclamations records');
});
}
$scope.changeSelect = function (dt) {
$scope.changeDate = moment(dt).format("DD/MM/YYYY");
}
$scope.today = function () {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yyyy',
startingDay: 1
};
$scope.formats = ['dd/MM/yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
}])
.service('ReclamationsByDateService', ['$http', function ($http) {
// Get Reclamations
this.getReclamations = function () {
return $http.get("/Reclamations/ReclamationsList");
};
}]);
})();
ReclamationsByDate.cshtml :
<div ng-controller="ReclamationsByDateController">
<pre>Please select a date: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>DatePicker</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="date" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-
open="opened" min-date="minDate" max-date="'2015-06-22'" ng-change="changeSelect(dt)" date-
disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">Search</button>
</span>
</p>
</div>
</div>
<pre>{{changeDate}}</pre>
<table class="table table-striped" show-filter="true" id="tblReclamations" style="width:100%">
<thead>
<tr>
<th>
Id
</th>
<th>
Date
</th>
<th>
Title
</th>
<th>
Status
</th>
<th>
Responsible
</th>
<th>
Comment
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Rec in reclamations | filter: {Date:changeDate}" ng-class-odd="'odd'" ng-
class-even="'even'" ng-style="{ 'background-color' : (Rec.Status == 'Pending') ? 'orange' : 'null'
}">
<td>{{Rec.RecId}}</td>
<td style="font-size: small; color:red;"><strong>{{Rec.Date}}</strong></td>
<td style="font-size: medium;"><strong>{{Rec.Title}}</strong></td>
<td style="font-size: small;"><strong>{{Rec.Status}}</strong></td>
<td>{{Rec.Responsible}}</td>
<td style="font-size: small;"><strong>{{Rec.Comment}}</strong></td>
</tr>
</tbody>
</table>
</div>
<script src="~/Scripts/app/controllers/reclamations-by-date-controller.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script>
</script>
_Layout.cshtml :
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-
ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css"
type="text/css" media="screen">
<link rel="stylesheet" href="/Content/bootstrap-datetimepicker.css" />
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<script src="~/Scripts/modernizr-2.8.3.js"></script>
<script src="~/Scripts/jquery-3.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/moment.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datetimepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.8.1/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.5.0/jszip.js"></script>
<script src="//cdn.rawgit.com/rainabba/jquery-table2excel/1.1.0/dist/jquery.table2excel.min.js">
</script>
<script src="~/Scripts/angular.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js"></script>
<script src="~/Scripts/angular-route.min.js"></script>
<script src="~/Scripts/app/app.js"></script>
Thank you !

Answer 1

The problem is with your filter
ng-repeat="Rec in reclamations | filter: {Date:changeDate}"
You need to pass to Angular filter a Date object, but changeDate is not (since you set it to a custom string on your datepicker handler). That's why the search fails.
Change your handler as follows:
$scope.changeSelect = function (dt) {
$scope.changeDate = dt;
}

Answer 2

you can try this
<span>{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}</span><br>

Answer 3

You could make use of customFilter to format any dates.
I'm using momentjs library here.
(function () {
'use strict';
angular
.module('app.core') // use your module name here
.filter('humanizeFilter', ['moment', function (moment) {
return function (input) {
return moment(input).format('MMM D, YYYY, HH:mm');
};
}
]
);
})();
Then in your template, you can use as below:
<span>{{1592585639000 | humanizeFilter}}</span><br>
Hope this helps!!