diff --git a/dev/js/src/datepicker.js b/dev/js/src/datepicker.js
index 1a1d9fe..01bb0d7 100644
--- a/dev/js/src/datepicker.js
+++ b/dev/js/src/datepicker.js
@@ -29,6 +29,11 @@
       return this;
     },
 
+    set : function (year, month, day) {
+      this.select(year, month, day);
+      console.dir(this._selected);
+    },
+
     select : function (year, month, day) {
       if (arguments.length >= 1) {
 	this._selected = {'year' : year};
@@ -47,8 +52,8 @@
       picker.classList.add('datepicker');
       this._showYear = year;
       this._showMonth = month;
-      picker.appendChild(this._yearHelper());
       picker.appendChild(this._monthHelper());
+      picker.appendChild(this._yearHelper());
       picker.appendChild(this._dayHelper());
       return picker;
     },
@@ -104,6 +109,10 @@
       this._yElement = year.appendChild(d.createElement('span'));
       this._yElement.appendChild(document.createTextNode(this._showYear));
 
+      this._yElement.onclick = function () {
+	this.set(this._showYear);
+      }.bind(this);
+
       // Increment year
       year.appendChild(d.createElement('span'))
 	.onclick = this.incrYear.bind(this);
@@ -127,6 +136,9 @@
       this._mElement.appendChild(
 	document.createTextNode(loc.MONTH[this._showMonth-1])
       );
+      this._mElement.onclick = function () {
+	this.set(this._showYear, this._showMonth);
+      }.bind(this);
       
       // Increment month
       month.appendChild(d.createElement('span'))
@@ -159,6 +171,14 @@
       var showDate = new Date(this._showYear, this._showMonth - 1, 1, 0, 0, 0, 0);
       var date     = new Date(this._showYear, this._showMonth - 1, 1, 0, 0, 0, 0);
       var today    = new Date();
+      var that = this;
+      var click = function () {
+	that.set(
+	  that._showYear,
+	  that._showMonth,
+	  parseInt(this.firstChild.data)
+	);
+      };
 
       // Skip back to the previous monday (may be in the last month)
       date.setDate(date.getDate() - ((date.getDay() + 6) % 7));
@@ -176,8 +196,12 @@
 	  var td = tr.appendChild(d.createElement('td'));
 
 	  // Not part of the current month
-	  if (date.getMonth() !== showDate.getMonth())
+	  if (date.getMonth() !== showDate.getMonth()) {
 	    td.classList.add('out');
+	  }
+	  else {
+	    td.onclick = click;
+	  };
 	  
 	  // This is the current day
 	  if (date.getDate()     === today.getDate() &&
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index bf8f43a..b653ef1 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -1,12 +1,14 @@
 @charset "utf-8";
 @import "../util";
 
+$border-size: 2px;
+
 div.datepicker {
   display: inline-block;
   padding: 4pt;
   box-shadow: $choose-box-shadow;
   border: {
-    width: 2px;
+    width: $border-size;
     style: solid;
     radius: $standard-border-radius;
   }
@@ -14,29 +16,47 @@
     font-size: 120%;
     width: 45%;
   }
-  > div.year {
+  > div.month {
     float: right;
   }
   
   @include choose-item;
   > div > span {
     display: inline-block;
+    &:first-child,
+    &:last-child {
+      width: 15%;
+      &::before {
+	display: inline-block;
+	text-align: center;
+	cursor: pointer;
+	font-family: 'FontAwesome';
+	min-width: 14px;
+      }
+    }
     &:first-child::before {
-      cursor: pointer;
-      font-family: 'FontAwesome';
       content: $fa-previous;
-      width: 10%;
     }
-    &:last-child::after {
-      cursor: pointer;
-      font-family: 'FontAwesome';
+    &:last-child::before {
       content: $fa-next;
-      width: 10%;
     }
+    overflow: hidden;
+    white-space: nowrap;
     &:nth-child(2) {
+      cursor: pointer;
       display: inline-block;
-      width: 80%;
+      width: 70%;
       text-align: center;
+      text-overflow: ellipsis;
+      border: {
+	radius: $standard-border-radius;
+	style: solid;
+	width: $border-size;
+	color: transparent;
+      }
+      &:hover {
+	@include choose-hover;
+      }
     }
   }
   table {