使用Datepicker（AngularJS）過濾日期

有一個表格顯示爲「ng-repeat」。有一個DatePicker。需要選擇日期，然後按日期過濾。我的數據保存在對象中。我知道datepicker格式和我的日期格式不相等。但我不知道如何解決這個問題。使用Datepicker（AngularJS）過濾日期

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

    ]; 

}])

來源

2016-12-05 Егор Кротенко

當日期在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; 
}

來源

2016-12-05 11:29:19

你的plinker是空的，請更新它。那裏只是你好世界 –

並給出HTML –

使用你的過濾器，當沒有選擇。沒有顯示。選擇一個日期時。顯示所有列表 –

據我所知，日期選擇器格式和我的日期格式不相等。但是我不怎麼解決這個問題。

當我使用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>

控制器-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));

來源

2016-12-05 10:32:45

你能explane如何在我的代碼中使用它？ –

而不是$ scope.dateFrom你應該使用$ scope.getdate.date，我想。如果這是格式化的日期。 –

無法讀取未定義的屬性'getFullYear' - 我添加您的HTML但出錯了 –

使用Datepicker（AngularJS）過濾日期

回答

相關問題