Question

有一个通过“ng-repeat”显示的表格。有一个DatePicker。需要选择日期，之后将按日期过滤。我的数据保存在对象中。我理解datepicker格式和我的日期格式不相等。但我不知道如何解决这个问题。

HTML

    <thead>
        <th> <input type="date"  id="date" ng-model="getdate.date" /></th>
      </thead>
<tr ng-repeat="paymentinfo in paymentList | filter:getdate">
          <td>{{paymentinfo.date}}</td>
          <td>{{paymentinfo.name}}</td>

</tr>

我的JS

angular.module('app.payment').controller('PaymentCtrl', ['$scope','$state', function($scope, $state){

$scope.paymentList = [
        {date:'06-12-2016', name : 'Pinao Class', remark : 'remarled', amount : 101},
        {date:'15.04.2016', name : 'drivers Class', remark : 'remarled', amount : 102},
        {date:'24.03.2016', name : 'Airplane Class', remark : 'remarled', amount : 103},
        {date:'28.02.2016', name : 'burger Class', remark : 'remarled', amount : 104},

    ];

}])

Answer 1

我理解datepicker格式和我的日期格式不相等。但我不知道如何解决这个问题。

当我使用DatePicker时，我以这种方式修复数据，也许这段代码可以帮助你！

Html代码

<input type="text" placeholder="dd/mm/yyyy" ng-model="dateFrom" uib-datepicker-popup="{{format}}" is-open="statusData.opened" datepicker-options="{startingDay: 1}" current-text="Today" close-text="Close" clear-text="Clear" />
<button type="button" ng-click="openData($event)"<i class="glyphicon glyphicon-calendar"></i></button>

Controller-js代码

$scope.format = 'dd/MM/yyyy';
//Some other code
$scope.finalDate = ($scope.dateFrom.getFullYear() + '-' + ('0' + ($scope.dateFrom.getMonth() + 1)).slice(-2) + '-' + ('0' + $scope.dateFrom.getDate()).slice(-2));

Answer 2

在javascript中处理日期时，我更喜欢使用moment

之类的外部库

以下是我的plunker版本的答案，我不知道我的回答是否足以回答你的问题。

基本上我所做的是：

// model for datetime picker
$scope.dt = new Date();

// format to give to momentjs
$scope.dateFormatInTable = 'DD-MM-YYYY';

// data to display
$scope.datas = [
    {date:'06-12-2016', name : 'Pinao Class', remark : 'remarled', amount : 101},
    {date:'15-04-2016', name : 'drivers Class', remark : 'remarled', amount : 102},
    {date:'24-03-2016', name : 'Airplane Class', remark : 'remarled', amount : 103},
    {date:'28-02-2016', name : 'burger Class', remark : 'remarled', amount : 104},
];

// assign paymentList data
$scope.paymentList = $scope.datas;

// public function to filter the date
$scope.filterDate = function(dt) {
 var filteredDatas = [];
 for (var i = 0; i < $scope.datas.length; i++) {

   var xx = moment($scope.datas[i].date, $scope.dateFormatInTable).toDate();
   if (moment(xx).isSame(dt, 'day')) {
     filteredDatas.push($scope.datas[i]);
   }
 }
 $scope.paymentList = filteredDatas;
}

// reset filter
$scope.resetFilter = function() {
 $scope.paymentList = $scope.datas;
}

使用Datepicker按日期过滤（AngularJS）

2 个答案: