Show date list on display page.

static/babystats.css

@@ -200,7 +200,7 @@ babyStatsDisplaySleepStatus, babyStatsDisplaySleepDuration {
 }
 
 babyStatsDisplayEventCounts {
-  margin: 15px;
+  margin: 20px;
   display: table;
   font-size: 20px;
 }
@@ -246,3 +246,20 @@ babyStatsDisplayEventCountValue {
   border-left: 1px solid rgb(233,127,2);
   white-space: pre-line;
 }
+
+babyStatsDisplayTimelines {
+  display: block;
+  width: 100%;
+}
+
+babyStatsDisplayDate {
+  display: block;
+  margin: 15px;
+  text-align: center;
+}
+
+babyStatsDisplayDateTitle {
+  color: rgb(189,21,80);
+  font-size: 20px;
+  font-weight: bold;
+}

static/babystats.js

@@ -833,4 +833,27 @@ BabyStats.prototype.updateDisplayPage_ = function() {
  * @param {Cosmopolite.typeMessage} message
  */
 BabyStats.prototype.updateDisplayDate_ = function(message) {
+  var date = new Date(message.created * 1000);
+  var dateStr = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
+  var days = [
+    'Sunday',
+    'Monday',
+    'Tuesday',
+    'Wednesday',
+    'Thursday',
+    'Friday',
+    'Saturday',
+  ];
+
+  if (!this.displayDates_[dateStr]) {
+    var dateObj = document.createElement('babyStatsDisplayDate');
+    this.displayDates_[dateStr] = dateObj;
+    this.displayTimelines_.insertBefore(
+        dateObj, this.displayTimelines_.firstChild);
+
+    var dateTitle = document.createElement('babyStatsDisplayDateTitle');
+    dateObj.appendChild(dateTitle);
+    dateTitle.textContent =
+        date.toLocaleDateString() + ' (' + days[date.getDay()] + ')';
+  }
 };