Save the date in and display it in the good format

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