How to place a datepicker inside the filter attribute of ng-table in angularjs? Is this possible? any one who can help me about this case. Thank You in advance for those who have a kind heart! And Sorry for my noob question.
id: 'date' is not working.
this is my person.js and person-table.html
(function() {
var app = angular.module("myApp", ["ngTable"]);
app.controller("demoController", demoController);
function demoController(NgTableParams) {
//MM-dd-yyyy
var simpleList = [{
"name": "Mark",
"birthDate": "02-23-1999",
"age": "17"
},{
"name": "Jose",
"birthDate": "02-14-1997",
"age": "21"
},{
"name": "Noel",
"birthDate": "06-26-2000",
"age": "17"
},{
"name": "Pankhar",
"birthDate": "03-24-1999",
"age": "18"
}];
this.tableParams = new NgTableParams({}, {
dataset: simpleList
});
this.nameFilter = {
name: {
id: 'text',
placeholder: 'Filter by name'
}
};
this.birthDayFilter = {
birthDate: {
id: 'text',
placeholder: 'MM-dd-yyyy'
}
};
this.ageFilter = {
age: {
id: 'number',
placeholder: 'Filter by age'
}
};
}
})();<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
<div ng-app="myApp" ng-controller="demoController as demo">
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
<tbody ng-repeat="row in $data track by $index">
<tr>
<td data-title="'Name'" filter="demo.nameFilter">{{row.name}}</td>
<td data-title="'Birth Date'" filter="demo.birthDayFilter">{{row.birthDate}}</td>
<td data-title="'Age'" filter="demo.ageFilter">{{row.age}}</td>
</tr>
</tbody>
</table>
</div>You can use custom filter template
<td data-title="'Birth Date'" filter="{birthDate: 'date.html'}">{{row.birthDate}}</td>
as you see, should create date.html.
more information: ng-table
Note:
<script type="text/ng-template" id="date.html"></script>not work in stackoverflow.com
<script type="text/ng-template" id="date.html">
<input type="date" name="{{name}}" ng-disabled="$filterRow.disabled" ng-model="params.filter()[name]" placeholder="MM-dd-yyyy" />
</script>
(function() {
var app = angular.module("myApp", ["ngTable"]);
app.controller("demoController", demoController);
function demoController(NgTableParams) {
//MM-dd-yyyy
var simpleList = [{
"name": "Mark",
"birthDate": "02-23-1999",
"age": "17"
},{
"name": "Jose",
"birthDate": "02-14-1997",
"age": "21"
},{
"name": "Noel",
"birthDate": "06-26-2000",
"age": "17"
},{
"name": "Pankhar",
"birthDate": "03-24-1999",
"age": "18"
}];
this.tableParams = new NgTableParams({}, {
dataset: simpleList
});
this.nameFilter = {
name: {
id: 'text',
placeholder: 'Filter by name'
}
};
this.birthDayFilter = {
birthDate: {
id: 'text',
placeholder: 'MM-dd-yyyy'
}
};
this.ageFilter = {
age: {
id: 'number',
placeholder: 'Filter by age'
}
};
}
})();<link rel="stylesheet"; href="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://unpkg.com/ng-table@2.0.2/bundles/ng-table.min.js"></script>
<div ng-app="myApp" ng-controller="demoController as demo">
<table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
<tbody ng-repeat="row in $data track by $index">
<tr>
<td data-title="'Name'" filter="demo.nameFilter">{{row.name}}</td>
<td data-title="'Birth Date'" filter="{birthDate: 'date.html'}">{{row.birthDate}}</td>
<td data-title="'Age'" filter="demo.ageFilter">{{row.age}}</td>
</tr>
</tbody>
</table>
</div>