Question

我希望能够通过从ui bootstrap datepicker中选择日期范围来过滤包含时间戳的列表。

以下是代码：

<div class="col-md-10 col-lg-offset-2">
                <form class="form-inline">
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-search"></i></div>
                            <input type="text" class="form-control" placeholder="Search for a Loan Application" ng-model="Loansearch">
                        </div>
                    </div>
                    <div class="form-group">
                        <select ng-model="Loansearch.mambu_account_state" class="form-control">
                            <option value="">All Applications</option>
                            <option value="Active">Active</option>
                            <option value="PARTIAL APPLICATION">Partial Application</option>
                            <option value="PENDING APPROVAL">Pending Approval</option>
                            <option value="CLOSE">Close</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control"
                               uib-datepicker-popup="dd-mm-yyyy"

                               ng-model="date1"
                               is-open="popup2.opened"
                               datepicker-options="dateOptions"
                               ng-required="true"
                               close-text="Close"
                               alt-input-formats="altInputFormats"
                               placeholder="From: dd-mm-yyyy"
                               ng-click="open2()"
                        />
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control"
                               uib-datepicker-popup="dd-mm-yyyy"

                               ng-model="date2"
                               is-open="popup1.opened"
                               datepicker-options="dateOptions"
                               ng-required="true"
                               close-text="Close"
                               alt-input-formats="altInputFormats"
                               placeholder="To: dd-mm-yyyy"
                               ng-click="open1()"
                        />
                    </div>
                </form>
            </div>
            <table class="table table-bordered table-striped">
                <thead>
                <tr>
                    <td>First Name</td>
                    <td>Last Name</td>
                    <td>Loan Account ID</td>
                    <td>Loan Amount</td>
                    <td>Created At</td>
                </tr>
                </thead>

                <tbody>
                <tr ng-repeat="loan in loans|filter:(!!Loansearch || undefined) && Loansearch :true">
                    <td>@{{ loan.customer.user.first_name }}</td>
                    <td>@{{ loan.customer.user.last_name}}</td>
                    <td>@{{ loan.mambu_loan_account_id }}</td>
                    <td>@{{ loan.mambu_account_state }}</td>
                    <td>@{{ loan.created_at | dateFormat}}</td>
                </tr>
                </tbody>

            </table>

此外，我希望能够填补＆＃34; From＆＃34;带有来自datepicker的值的字段以及＆＃34; To＆＃34;也是字段，所以只获取此范围内的记录。

Answer 1

我不知道我是否理解正确的问题，但试试这个：将ui.bootstrap注入角度应用程序并更改此行

<input type="date" class="form-control" placeholder="Search for a Loan Application" ng-model="Loansearch">

用这个

<uib-datepicker ng-model="Loansearch" class="well well-sm" ></uib-datepicker>

并将ng-repeat部分更改为此

ng-repeat="loan in loans|dateFilter:Loansearch:'created_at'"

我编写了一个简单的过滤器，将此过滤器添加到您的应用

myApp.filter('dateFilter',function(){
 return function(items,key,field){
     return items.filter(function(item){
      return key?(item[field].toString().slice(0,10)==key):true;
     });
  };
})

使用ui引导日期

1 个答案: