diff --git a/dev/demo/vcdemo.js b/dev/demo/vcdemo.js
index e92b324..d7dc0d2 100644
--- a/dev/demo/vcdemo.js
+++ b/dev/demo/vcdemo.js
@@ -83,6 +83,7 @@
       ['pubDate', 'date'],
       ['author', 'string']
     ]).fromJson(json);
+
     document.getElementById('vc').appendChild(vc.element());
 
     // show the current JSON serialization
diff --git a/dev/js/src/datepicker.js b/dev/js/src/datepicker.js
index 01bb0d7..90b0572 100644
--- a/dev/js/src/datepicker.js
+++ b/dev/js/src/datepicker.js
@@ -31,7 +31,14 @@
 
     set : function (year, month, day) {
       this.select(year, month, day);
-      console.dir(this._selected);
+      if (this._click !== undefined)
+	this._click(this._selected);
+      else 
+	console.dir(this._selected);
+    },
+
+    onclick : function (cb) {
+      this._click = cb;
     },
 
     select : function (year, month, day) {
@@ -48,14 +55,18 @@
     },
 
     show : function (year, month) {
-      var picker = d.createElement('div');
-      picker.classList.add('datepicker');
-      this._showYear = year;
-      this._showMonth = month;
-      picker.appendChild(this._monthHelper());
-      picker.appendChild(this._yearHelper());
-      picker.appendChild(this._dayHelper());
-      return picker;
+      this._element = d.createElement('div');
+      this._element.classList.add('datepicker');
+      this._showYear = year ? year : (this._selected['year'] ? this._selected['year'] : 2012);
+      this._showMonth = month ? month : (this._selected['month'] ? this._selected['month'] : 2);
+      this._element.appendChild(this._monthHelper());
+      this._element.appendChild(this._yearHelper());
+      this._element.appendChild(this._dayHelper());
+      return this._element;
+    },
+
+    element : function () {
+      return this._element;
     },
 
     incrYear : function () {
@@ -211,7 +222,7 @@
 	  };
 
 	  // This is the day selected
-	  if (s['day']) {
+	  if (s && s['day']) {
 	    if (date.getDate()     === s['day'] &&
 		date.getMonth()    === s['month']-1 &&
 		date.getFullYear() === s['year']) {
diff --git a/dev/js/src/vc.js b/dev/js/src/vc.js
index c816883..1bb3b15 100644
--- a/dev/js/src/vc.js
+++ b/dev/js/src/vc.js
@@ -47,8 +47,9 @@
   'vc/doc',
   'vc/docgroup',
   'vc/menu',
+  'datepicker',
   'util'
-], function (unspecDocClass, docClass, docGroupClass, menuClass) {
+], function (unspecDocClass, docClass, docGroupClass, menuClass, dpClass) {
   "use strict";
 
   // ???
@@ -60,6 +61,7 @@
   var loc = KorAP.Locale;
 
   KorAP._vcKeyMenu = undefined;
+  KorAP._vcDatePicker = dpClass.create();
 
   /**
    * Virtual Collection
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 5571cf7..2635b2f 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -418,8 +418,49 @@
     // Click on the match operator, show me the menu
     _changeValue : function (e) {
       // TODO: Just kidding - this is temporary!
-      this.value(window.prompt('Enter new value'));
-      this.update();
+
+      if (this.type() === 'date') {
+	var dp = KorAP._vcDatePicker;
+
+	var v = this.value();
+	if (v !== undefined) {
+	  var d = v.split('-');
+	  dp.select(parseInt(d[0]), parseInt(d[1]), parseInt(d[2]));
+	};
+
+	var that = this;
+	dp.onclick(function (selected) {
+
+	  // There are values selected
+	  if (selected['year']) {
+	    var v = selected['year'];
+	    if (selected['month']) {
+	      v += '-';
+	      v += selected['month'] < 10 ? '0' + selected['month'] : selected['month'];
+	      if (selected['day'])
+		v += '-';
+		v += selected['day'] < 10 ? '0' + selected['day'] : selected['day'];
+	    };
+	    that.value(v);
+	    that.update();
+	    return;
+	  };
+
+	  // Remove datepicker
+	  that._element.removeChild(
+	    dp.element()
+	  );
+	});
+
+	this._element.insertBefore(
+	  dp.show(),
+	  this._valueE
+	);
+      }
+      else {
+	this.value(window.prompt('Enter new value'));
+	this.update();
+      };
     },
 
 
diff --git a/dev/scss/header/datepicker.scss b/dev/scss/header/datepicker.scss
index b653ef1..8a3fbcd 100644
--- a/dev/scss/header/datepicker.scss
+++ b/dev/scss/header/datepicker.scss
@@ -5,6 +5,8 @@
 
 div.datepicker {
   display: inline-block;
+  position: absolute;
+  font-size: 80%;
   padding: 4pt;
   box-shadow: $choose-box-shadow;
   border: {