AngularJS datepicker
by Tapan Acharjee
HTML
<div ng-app="date">
<div ng-controller="dateCtrl">
<!-- jq -->
<!-- ng -->
From Date:
<input type="text" datepicker ng-model="date2" />
<span>{{date2}}</span> To Date:
<input type="text" datepicker1 ng-model="date3" />
<span>{{date3}}</span>
<br>
<br>
<br>
<label>List Of Names</label>
<br>
<div ng-repeat="name in names | myfilter:date2:date3">
<br>{{name.C_Name}}
<br>
</div>
</div>
</div>
CSS
</style> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> <style>
JavaScript
angular.module("date", [])
.directive("datepicker", function() {
return {
restrict: "A",
link: function(scope, el, attr) {
el.datepicker({
dateFormat: 'yy-mm-dd'
});
}
};
})
.directive("datepicker1", function() {
return {
restrict: "A",
link: function(scope, el, attr) {
el.datepicker({
dateFormat: 'yy-mm-dd'
});
}
};
}).filter("myfilter", function() {
return function(items, from, to) {
var arrayToReturn = [];
for (var i = 0; i < items.length; i++) {
var test = new Date(items[i].C_Option.date.$date);
var month = test.getMonth() + 1;
var date = test.getDate();
var year = test.getFullYear();
var newDate = year + "-" + month + "-" + date
if (newDate >= from && newDate <= to) {
arrayToReturn.push(items[i]);
}
}
return arrayToReturn;
};
})
.controller("dateCtrl", function($scope) {
$scope.date2 = '2015-10-18';
$scope.date3 = '2015-10-19';
$scope.names = [{
C_Name: "Ramesh",
C_Option: {
"date": {
"$date": "2015-10-19T09:52:26.507Z"
}
}
}, {
C_Name: "Suresh",
C_Option: {
"date": {
"$date": "2015-10-21T09:52:26.507Z"
}
}
}, {
id: "3",
C_Name: "Vignesh",
C_Phone: "*******",
C_Option: {
"date": {
"$date": "2015-10-20T09:52:26.507Z"
}
}
}, {
id: "4",
C_Name: "Sarath",
C_Phone: "******",
C_Option: {
"date": {
"$date": "2015-10-20T09:52:26.507Z"
}
}
},
{
id: "5",
C_Name: "Sundhar",
C_Phone: "******",
C_Option: {
"date": {
"$date": "2015-10-21T09:52:26.507Z"
}
}
},
{
id:...