保存日期并以良好的格式显示

Question

我正在编写一个带有创建日期的 crud 应用程序。当我添加一个新对象时，日期以良好的格式保存在数据库中：

Database

现在当日期显示在桌子上时，它会这样显示：

enter image description here

我找到了一个解决方案，可以使用 {{Rec.Date.slice(6,-2) | 将其显示为良好的格式。日期：'dd/MM'}}

问题是，当我尝试添加一个日期选择器以使用日期变量进行搜索时，即使我给它一个已经存在于基础上的日期，搜索也不匹配任何内容。我很确定问题出在日期格式上，但在保存新回收完成后，我找不到任何格式化它的解决方案。

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>

谢谢！

Answer 1

问题出在你的过滤器上

ng-repeat="Rec in reclamations | filter: {Date:changeDate}"

您需要将 Date 对象传递给 Angular 过滤器，但 changeDate 不是（因为您在 datepicker 处理程序上将其设置为自定义字符串）。这就是搜索失败的原因。

如下更改您的处理程序：

   $scope.changeSelect = function (dt) {
        $scope.changeDate = dt;
    }

Answer 2

你可以试试这个

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

Answer 3

您可以使用 customFilter 来格式化任何日期。 我在这里使用momentjs 库。

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

然后在你的模板中，你可以使用如下：

<span>{{1592585639000 | humanizeFilter}}</span><br>

希望这会有所帮助！