diff --git a/dev/demo/datepicker.html b/dev/demo/datepicker.html
new file mode 100644
index 0000000..e99f021
--- /dev/null
+++ b/dev/demo/datepicker.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Datepicker demo</title>
+    <meta charset="utf-8" />
+    <script data-main="datepickerdemo.js" src="../js/lib/require.js" async="async"></script>
+    <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+  </head>
+  <body>
+    <div id="dp"></div>
+  </body>
+</html>
diff --git a/dev/demo/datepickerdemo.js b/dev/demo/datepickerdemo.js
new file mode 100644
index 0000000..ce0913e
--- /dev/null
+++ b/dev/demo/datepickerdemo.js
@@ -0,0 +1,15 @@
+requirejs.config({
+  baseUrl: '../js/src',
+  paths : {
+    'lib': '../lib'
+  }
+});
+
+require(['datepicker', 'lib/domReady'], function (dpClass, domReady) {
+  domReady(function () {
+    var dp = dpClass.create();
+    document.getElementById('dp').appendChild(
+      dp.select(2015,4,12).show(2015,4)
+    );
+  });
+});
diff --git a/dev/js/src/datepicker.js b/dev/js/src/datepicker.js
new file mode 100644
index 0000000..1a1d9fe
--- /dev/null
+++ b/dev/js/src/datepicker.js
@@ -0,0 +1,222 @@
+/**
+ * Date picker for the
+ * Virtual Collection builder.
+ */
+define(['util'], function () {
+  "use strict";
+
+  var loc = KorAP.Locale;
+
+  loc.WDAY = loc.WDAY || [
+    'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'
+  ];
+
+  loc.MONTH = loc.MONTH || [
+    'January', 'February', 'March', 'April',
+    'May', 'June', 'July', 'August',
+    'September', 'October', 'November',
+    'December'
+  ];
+
+  var d = document;
+
+  return {
+    create : function () {
+      return Object.create(this)._init();
+    },
+
+    _init : function () {
+      return this;
+    },
+
+    select : function (year, month, day) {
+      if (arguments.length >= 1) {
+	this._selected = {'year' : year};
+	if (arguments.length >= 2) {
+	  this._selected['month'] = month;
+	  if (arguments.length >= 3)
+	    this._selected['day'] = day;
+	};
+	return this;
+      };
+      return this._selected;
+    },
+
+    show : function (year, month) {
+      var picker = d.createElement('div');
+      picker.classList.add('datepicker');
+      this._showYear = year;
+      this._showMonth = month;
+      picker.appendChild(this._yearHelper());
+      picker.appendChild(this._monthHelper());
+      picker.appendChild(this._dayHelper());
+      return picker;
+    },
+
+    incrYear : function () {
+      this._showYear++;
+      this._updateYear();
+      this._updateMonth();
+      this._updateDay();
+      return;
+    },
+
+    decrYear : function () {
+      this._showYear--;
+      this._updateYear();
+      this._updateMonth();
+      this._updateDay();
+      return;
+    },
+
+    incrMonth : function () {
+      this._showMonth++;
+      if (this._showMonth > 12) {
+	this._showMonth = 1;
+	this.incrYear();
+      }
+      else {
+	this._updateMonth();
+	this._updateDay();
+      };
+    },
+
+    decrMonth : function () {
+      this._showMonth--;
+      if (this._showMonth < 1) {
+	this._showMonth = 12;
+	this.decrYear();
+      }
+      else {
+	this._updateMonth();
+	this._updateDay();
+      };
+    },
+
+    _yearHelper : function () {
+      var year = d.createElement('div');
+      year.classList.add('year');
+
+      // Decrement year
+      year.appendChild(d.createElement('span'))
+	.onclick = this.decrYear.bind(this);
+
+      this._yElement = year.appendChild(d.createElement('span'));
+      this._yElement.appendChild(document.createTextNode(this._showYear));
+
+      // Increment year
+      year.appendChild(d.createElement('span'))
+	.onclick = this.incrYear.bind(this);
+
+      return year;
+    },
+
+    _updateYear : function () {
+      this._yElement.firstChild.data = this._showYear;
+    },
+
+    _monthHelper : function () {
+      var month = d.createElement('div');
+      month.classList.add('month');
+
+      // Decrement month
+      month.appendChild(d.createElement('span'))
+	.onclick = this.decrMonth.bind(this);
+      
+      this._mElement = month.appendChild(d.createElement('span'));
+      this._mElement.appendChild(
+	document.createTextNode(loc.MONTH[this._showMonth-1])
+      );
+      
+      // Increment month
+      month.appendChild(d.createElement('span'))
+	.onclick = this.incrMonth.bind(this);
+
+      return month;
+    },
+
+    _updateMonth : function () {
+      this._mElement.firstChild.data = loc.MONTH[this._showMonth-1];
+    },
+
+    _dayHelper : function () {
+      var table = d.createElement('table');
+
+      var tr = table.appendChild(d.createElement('thead'))
+	.appendChild(d.createElement('tr'));
+      for (var i = 0; i < 7; i++) {
+	tr.appendChild(d.createElement('th'))
+	  .appendChild(d.createTextNode(loc.WDAY[i]));
+      };
+
+      this._dBElement = this._dayBody();
+
+      table.appendChild(this._dBElement);
+      return table;
+    },
+
+    _dayBody : function () {
+      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();
+
+      // Skip back to the previous monday (may be in the last month)
+      date.setDate(date.getDate() - ((date.getDay() + 6) % 7));
+
+      var tb = d.createElement('tbody');
+
+      var s = this.select();
+
+      // Iterate over all days of the table
+      while (1) {
+
+	// Loop through the week
+	var tr = tb.appendChild(d.createElement('tr'));
+	for (var i = 0; i < 7; i++) {
+	  var td = tr.appendChild(d.createElement('td'));
+
+	  // Not part of the current month
+	  if (date.getMonth() !== showDate.getMonth())
+	    td.classList.add('out');
+	  
+	  // This is the current day
+	  if (date.getDate()     === today.getDate() &&
+	      date.getMonth()    === today.getMonth() &&
+	      date.getFullYear() === today.getFullYear()) {
+	    td.classList.add('today');
+	  };
+
+	  // This is the day selected
+	  if (s['day']) {
+	    if (date.getDate()     === s['day'] &&
+		date.getMonth()    === s['month']-1 &&
+		date.getFullYear() === s['year']) {
+	      td.classList.add('selected');
+	    };
+	  };
+
+	  // Add the current day to the table
+	  td.appendChild(
+	    d.createTextNode(date.getDate())
+	  );
+	  
+	  // Next day
+	  date.setDate(date.getDate() + 1);
+	};
+
+	if (date.getMonth() !== showDate.getMonth())
+	  break;
+      };
+      return tb;
+    },
+
+    _updateDay : function () {
+      var newBody = this._dayBody();
+      this._dBElement.parentNode.replaceChild(
+	newBody,
+	this._dBElement
+      );
+      this._dBElement = newBody;
+    }
+  };
+});
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
new file mode 100644
index 0000000..bf8f43a
--- /dev/null
+++ b/dev/scss/header/datepicker.scss
@@ -0,0 +1,73 @@
+@charset "utf-8";
+@import "../util";
+
+div.datepicker {
+  display: inline-block;
+  padding: 4pt;
+  box-shadow: $choose-box-shadow;
+  border: {
+    width: 2px;
+    style: solid;
+    radius: $standard-border-radius;
+  }
+  > div {
+    font-size: 120%;
+    width: 45%;
+  }
+  > div.year {
+    float: right;
+  }
+  
+  @include choose-item;
+  > div > span {
+    display: inline-block;
+    &:first-child::before {
+      cursor: pointer;
+      font-family: 'FontAwesome';
+      content: $fa-previous;
+      width: 10%;
+    }
+    &:last-child::after {
+      cursor: pointer;
+      font-family: 'FontAwesome';
+      content: $fa-next;
+      width: 10%;
+    }
+    &:nth-child(2) {
+      display: inline-block;
+      width: 80%;
+      text-align: center;
+    }
+  }
+  table {
+    border-collapse: separate;
+    border-spacing: 1px;
+  }
+  td {
+    @include standard-text-padding;
+    text-align: center;
+    border: {
+      style: solid;
+      width: 1px;
+    }
+    &:not(.out) {
+      cursor: pointer;
+      @include choose-item;
+      background-color: $nearly-white;
+      &.today {
+	background-color: $light-blue;
+	color: $dark-blue;
+	text-shadow: none;
+      }
+      &.selected {
+	@include choose-active;
+      }
+      &:hover {
+	@include choose-hover;
+      }
+    }
+    &.out {
+      border-color: transparent;
+    }
+  }
+}
\ No newline at end of file
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 60a3bf4..e63283a 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -4,6 +4,7 @@
 @import "menu";       // Menu list
 @import "searchbar";  // The search bar
 @import "vc";         // Virtual collection builder
+@import "datepicker"; // Datepicker
 
 header {
   position: relative;
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index 6d2172f..f0e10de 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -38,8 +38,8 @@
 $darkest-blue:   darken($dark-blue, 40%);
 
 
-/*
- * Grey
+/**
+ * Grey Colors
  */
 $middle-grey:  $ids-grey-1; // #999;
 $light-grey:   $ids-grey-2; // #ddd;
@@ -114,6 +114,13 @@
   border-color: $darker-orange;
 }
 
+@mixin choose-inactive {
+  color: lighten($choose-color, 20%);
+  background-color: lighten($choose-bg, 20%);
+  border-color: transparent;
+  text-shadow: none;
+}
+
 @mixin choose-active {
   color: $dark-green;
   text-shadow: none;