diff --git a/members/static/html/jasenlista.html b/members/static/html/jasenlista.html
index be17d12..54b45c1 100644
--- a/members/static/html/jasenlista.html
+++ b/members/static/html/jasenlista.html
@@ -1,4 +1,14 @@
-<h3> Jäsenlista (jäseniä {{members.length}})</h3>
+<div class="row">
+	<div class="col-md-7">
+		<h3> Jäsenlista (jäseniä {{members.length}})</h3>
+	</div>
+	<div class="col-md-3">
+		<md-datepicker ng-model="datePicker" md-placeholder="Filter by date"></md-datepicker>
+	</div>
+	<div class="col-md-1 offset-md-1">		<!-- style="vertical-align: bottom;"-->
+		<input type="button" value="Clear filter" class="btn btn-success" ng-click="clear_filter()" />
+	</div>
+</div>
 <div>
 	<input type="button" value="Lataa CSV" class="btn btn-info" ng-click="loadCSV()"/>
 	<table id="choose-address-table" class="table table-striped">
diff --git a/members/static/js/appconfig.js b/members/static/js/appconfig.js
index 382521e..9a4841c 100644
--- a/members/static/js/appconfig.js
+++ b/members/static/js/appconfig.js
@@ -1,4 +1,4 @@
-var app = angular.module('memberApp', ['ngRoute']);
+var app = angular.module('memberApp', ['ngRoute','ngMaterial','ngMessages']);
 
 app.config(['$httpProvider', function ($httpProvider) {
     $httpProvider.defaults.xsrfCookieName = 'csrftoken';
diff --git a/members/static/js/members_controllers.js b/members/static/js/members_controllers.js
index de32fd1..79b9b72 100644
--- a/members/static/js/members_controllers.js
+++ b/members/static/js/members_controllers.js
@@ -98,6 +98,26 @@ app.controller("getController", function($scope, $http, $window, $location){
 			}
 		);
 	};
+
+	$scope.datePicker = null;
+	$scope.filter_by_date = function() {
+		if ($scope.datePicker == null)
+		{
+
+		}
+		else
+		{
+			
+		}
+	};
+	$scope.clear_filter = function() {
+		$scope.datePicker = null;
+		$scope.getFunction();
+	};
+
+	$scope.$watch('datePicker', function(newValue, oldValue) {
+		$scope.filter_by_date();
+	});
 });
 
 app.controller("postController", function($scope, $http, $location) {
diff --git a/members/templates/members_index.html b/members/templates/members_index.html
index 8940d54..a666be0 100644
--- a/members/templates/members_index.html
+++ b/members/templates/members_index.html
@@ -9,12 +9,21 @@
 	<title>Jäsenrekisteri</title>
 
 	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
-	<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-	<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel = "stylesheet">
-	<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
+	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel = "stylesheet">
+	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.js"></script>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.js"></script>
-	<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
+	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.js"></script>
 	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+
+	<!-- DatePicker -->
+    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
+    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-messages.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-animate.min.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-aria.min.js"></script>
+    
 	{%load staticfiles %}
 	<script src="/static/js/jquery.noty.packaged.js"></script>
 	<script src="/static/js/appconfig.js"></script>