Datepicker（AngularJS）を使用して日付でフィルタリング

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

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

Answer 2

私は、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> 

コントローラー-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));