<!doctype html>
<html ng-app="mjFilter">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="example.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.1/moment.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="mjFilterCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>DatePicker</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" ng-change="changeSelect(dt)" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
<pre>{{changeDate}}
<br>To Check Filter Select any of the following (joining date) from Datepicker.
</pre>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Full Name</th>
<th>Designation</th>
<th>Joining Date(MM-DD-YYYY)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in userlist | filter: {jdate:changeDate}">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.desc}}</td>
<td>{{user.jdate}}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
/* Put your css in here */
angular.module('mjFilter', ['ui.bootstrap']);
angular.module('mjFilter').controller('mjFilterCtrl', function ($scope) {
$scope.userlist =
[{id:'001',name:'Arghya Dey Sarkar',desc:"Team Leader",jdate:"04-10-2015"},
{id:'002', name:'Prasenjit Chanda',desc:"Web Dev",jdate:"04-20-2015"},
{id:'003', name:'Arijit Chatterjee',desc:"Web Dev",jdate:"04-12-2015"},
{id:'004', name:'Mrittunjoy Das',desc:"Web Dev",jdate:"04-15-2015"}];
//actually dt model return date in "2015-04-10T08:28:33.461Z" format
//In the function below I have parsed default date using moment js
$scope.changeSelect= function(dt){
$scope.changeDate= moment(dt).format("MM-DD-YYYY");
}
$scope.today = function() {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.formats = ['MM-dd-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
$scope.format = $scope.formats[0];
});