Angularjs Ngtable-custom Filter Template-calendar

JSP page:

<script type= "Text/ng-template" id= "path/to/your/filters/top-date-one.html" >
    <input type= "text"  ng-click= "popup1.opened=!popup1.opened"   uib-datepicker-popup= "{{formats[2]}}"  ng-model= "Vm.dateinfoone" is-open= "popup1.opened" datepicker-options= "dateOptions"  ng-required= "true" close-text= "Close" alt-input-formats= "altinputformats" readonly class= "Form-control width-inherit" style= " Background-color: #fff "/>
</script>

<table ng-table= "Vm.tableparamscompletedorder" class= "table table-condensed table-bordered table-striped" >
&LT;TR ng-repeat= "Order in $data" >
&LT;TD title= "' Date '" filter= "{orderDate: ' path/to/your/filters/top-date-one.html '}" sortable= "' orderDate '" >{{ Order.orderdate | Date: ' Dd-mm-yyyy '}}</td>
&LT;TD title= "' User Email '" filter= "{useremail: ' text '}" sortable= "' UserEmail '" >{{order.userEmail}}</td>
&LT;TD title= "' First Name '" filter= "{firstName: ' text '}" sortable= "' FirstName '" >{{order.firstName}}</td>
&LT;TD title= "' Last Name '" filter= "{lastName: ' text '}" sortable= "' LastName '" >{{order.lastName}}</td>
&LT;TD title= "' Company '" "filter=" {companyName: ' text '} "sortable=" ' CompanyName ' ">{{order.companyname}}</td >
&LT;TD title= "' Order number '" filter= "{ordercode: ' text '}" sortable= "' Ordercode '" ><a href= "#" data-ng-click= " Fn.openorderinfo (order); " >{{order.orderCode}}</a></td>
&LT;TD title= "' Datasource '" filter= "{Datasource: ' text '}" sortable= "' Datasource '" >{{order.datasource}}</td >
&LT;TD title= "' Quantity '" filter= "{Quantity: ' text '}" sortable= "' Quantity '" >{{order.quantity}}</td>
</tr>
</table>

which

Input is the corresponding calendar control in bootstrap

Id= "path/to/your/filters/top-date-one.html"  corresponds to  filter= "{orderDate: ' path/to/your/filters/ Top-date-one.html '} '



ls|

 angular.module ("Ni.controllers.user.reports", ["ngtable", "Ngtabledemos", "Angularmask"]); 
 Angular.module ("Ni.controllers.user.reports"). config (setconfigphasesettings); 
 setconfigphasesettings. $inject = ["Ngtablefilterconfigprovider"]; 
 Function Setconfigphasesettings (ngtablefilterconfigprovider) {
 var filteraliasurls = {
//Note:ngta BLE also registers a ' number ' filter 
//we ' re overriding this alias to point to our custom template 
}; ngtablefilterconfigprovider.setconfig ({
 Aliasurls:filteraliasurls 
}); 
 
//Optionally set a default URL to resolve alias names that has not been explicitly registered 
//If you D On ' t set one, then ' ng-table/filters/' would be used by default 
 Ngtablefilterconfigprovider.setconfig ({
 D Efaultbaseurl: "ng-table/filters/" 
}); 
} 
 
 Angularjs controller 
 
//Calendar control 

$scope. Popup1 = {
    Opened:false
};
$scope. dateOptions = {
    Formatyear: ' yy ',
    Startingday:1
};
$scope. formats = [' dd-mmmm-yyyy ', ' yyyy/mm/dd ', ' dd-mm-yyyy ', ' shortdate '];
$scope. altinputformats = [' m!/d!/yyyy '];


Orderslist Post resulting collection of results

Vm.tableparamscompletedorder = new Ngtableparams ({count:15}, {counts:[], dataset:orderslist});

Use Listener for Calendar

$scope. $watch (' Vm.dateinfoone ', function (n,o) {
    if (n!=o && n! = undefined && vm.status== "2,3,4") {
        var temp;
        temp= _.filter (Vm.tempcompletedorder,function (item) {
            return $filter (' Date ') (N, ' yyyy-mm-dd ') = = $filter (' Date ') (Item.orderdate, ' yyyy-mm-dd ');
        });
        Vm.tableparamscompletedorder = new Ngtableparams ({count:15, Filter:vm.tableParamsCompletedOrder.filter ()}, {counts: [], dataset:temp});
    }else {
        if (vm.tableparamscompletedorder! = undefined) {
            Vm.tableparamscompletedorder = new Ngtableparams ({count:15, Filter:vm.tableParamsCompletedOrder.filter ()}, {counts: [], dataset:vm.tempCompletedOrder});
        }
    }
})

which

Vm.tableParamsCompletedOrder.filter () is the previous filter condition added to the Vm.tableparamscompletedorder

$filter (' Date ') (Item.orderdate, ' yyyy-mm-dd ') formats the date, Item.orderdate is the form of a character stamp



Specific reference http://ng-table.com/#/filtering/demo-custom-template

Angularjs Ngtable-custom Filter Template-calendar