Merge pull request #278 from colkito/feature/added-calendar-selector

#263 Added a calendar selector for blocks

public/src/css/common.css

@@ -193,6 +193,7 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
   position: fixed;
   width: 250px;
   border: 1px solid #eee;
+  z-index: 1;
 }
 
 @media (max-width: 768px) {

public/src/js/controllers/blocks.js

@@ -16,6 +16,27 @@ angular.module('insight.blocks').controller('BlocksController',
     });
   }
 
+  //Datepicker
+  var _formatTimestamp = function (date) {
+    var yyyy = date.getUTCFullYear().toString();
+    var mm = (date.getUTCMonth() + 1).toString(); // getMonth() is zero-based
+    var dd  = date.getUTCDate().toString();
+
+    return yyyy + '-' + (mm[1] ? mm : '0' + mm[0]) + '-' + (dd[1] ? dd : '0' + dd[0]); //padding
+  };
+
+  $scope.$watch('dt', function(newValue, oldValue) {
+    if (newValue !== oldValue) {
+      $location.path('/blocks-date/' + _formatTimestamp(newValue));
+    }
+  });
+
+  $scope.openCalendar = function($event) {
+    $event.preventDefault();
+    $event.stopPropagation();
+
+    $scope.opened = true;
+  };
 
   $scope.humanSince = function(time) {
     var m = moment.unix(time).startOf('day');

public/views/block_list.html

@@ -8,7 +8,10 @@
           <h3>Blocks <br> mined on:</h3>
         </div>
       </div>
-      <p class="lead text-center m20v">{{pagination.current}} UTC</p>
+      <p class="lead text-center m20v">
+        {{pagination.current}} UTC
+        <a href="#" class="btn btn-primary btn-xs" datepicker-popup show-button-bar="false" data-ng-click="openCalendar($event)" data-ng-model="dt" is-open="opened" data-ng-required="true"><span class="glyphicon glyphicon-calendar"></span></a>
+      </p>
       <p class="lead text-center m20v"  data-ng-show="loading">&nbsp;</p>
       <p class="text-center m20v"  data-ng-show="pagination.isToday && !loading">Today</p>
       <p class="text-center m20v"  data-ng-show="!pagination.isToday && !loading">{{humanSince(pagination.currentTs)}}