Enregistrez la date et affichez-la au bon format

Je programme une application grossière avec une date de création. lorsque j'ajoute un nouvel objet, la date est enregistrée dans la base de données avec un bon format:

Base de données

Maintenant, lorsque la date est affichée sur le tableau, elle me montre comme ceci:

entrez la description de l'image ici

J'ai trouvé une solution pour l'afficher comme un bon format avec {{Rec.Date.slice (6, -2) | date: 'jj / MM'}}

Le problème est que lorsque j'ai essayé d'ajouter un sélecteur de date pour faire une recherche avec la variable de date, la recherche ne correspond à rien même si je lui donne déjà une date existait sur la base. Je suis à peu près sûr que le problème est lié au format de la date, mais je ne trouve aucune solution pour le formater lorsque l'enregistrement d'une nouvelle récupération est terminé.

reclamations-by-date-controller.js:

<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>

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:

(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");
        };

    }]);

})();

Merci!