diff --git a/dev/demo/datepicker.html b/dev/demo/datepicker.html
index e99f021..d24fac2 100644
--- a/dev/demo/datepicker.html
+++ b/dev/demo/datepicker.html
@@ -7,6 +7,8 @@
     <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
   </head>
   <body>
-    <div id="dp"></div>
+    <div class="vc">
+      <div id="dp"></div>
+    </div>
   </body>
 </html>
diff --git a/dev/js/spec/datepickerSpec.js b/dev/js/spec/datepickerSpec.js
index bcab225..865b721 100644
--- a/dev/js/spec/datepickerSpec.js
+++ b/dev/js/spec/datepickerSpec.js
@@ -46,7 +46,7 @@
       expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
 
       // Max value
-      var e = dp.show(9998, 2);
+      e = dp.show(9998, 2);
       expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('9998');
       expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
 
@@ -59,7 +59,7 @@
       expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
 
       // Min value
-      var e = dp.show(2, 2);
+      e = dp.show(2, 2);
       expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2');
       expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
 
@@ -78,7 +78,69 @@
 
     it('should have modifyable month', function () {
       var dp = dpClass.create();
-      var e = dp.show(2013, 6);
+      var e = dp.show(2012, 9);
+
+      expect(e.nodeName).toEqual('DIV');
+      expect(e.classList.contains('datepicker')).toBeTruthy();
+
+      expect(e.getAttribute('tabindex')).toEqual('0');
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2012');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('September');
+
+      dp.incrMonth();
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2012');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('October');
+
+      dp.incrMonth();
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2012');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('November');
+
+      dp.incrMonth();
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2012');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('December');
+
+      dp.incrMonth();
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2013');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('January');
+
+      dp.decrMonth();
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('2012');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('December');
+
+      // Max value
+      e = dp.show(9999, 12);
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('9999');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('December');
+
+      dp.incrMonth();
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('9999');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('December');
+
+      // Min value
+      e = dp.show(1, 2);
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('1');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
+
+      dp.decrMonth();
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('1');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('January');
+
+      dp.decrMonth();
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('0');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('December');
+
+      e = dp.show(0, 2);
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('0');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('February');
+
+      dp.decrMonth();
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('0');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('January');
+
+      dp.decrMonth();
+      expect(e.querySelector('div.year > span:nth-child(2)').firstChild.data).toEqual('0');
+      expect(e.querySelector('div.month > span:nth-child(2)').firstChild.data).toEqual('January');
+
     });
   });
 });
diff --git a/dev/js/src/datepicker.js b/dev/js/src/datepicker.js
index 9882364..84243a9 100644
--- a/dev/js/src/datepicker.js
+++ b/dev/js/src/datepicker.js
@@ -46,13 +46,19 @@
     select : function (year, month, day) {
       if (arguments.length >= 1) {
 	this._selected = {'year' : year};
+	this._showYear = year;
 	if (arguments.length >= 2) {
 	  this._selected['month'] = month;
-	  if (arguments.length >= 3)
+	  this._showMonth = month;
+	  if (arguments.length >= 3) {
 	    this._selected['day'] = day;
+	    this._showDay = day;
+	  };
 	};
+
 	return this;
       };
+
       return this._selected;
     },
 
@@ -63,13 +69,16 @@
      */
     set : function (year, month, day) {
       this.select(year, month, day);
+      this.store();
+    },
+
+    store : function () {
       if (this._click !== undefined)
 	this._click(this._selected);
       else 
 	console.dir(this._selected);
     },
 
-
     /**
      * Set the action for clicking as a callback.
      * The callback will retrieve a an object with
@@ -81,7 +90,7 @@
       this._click = cb;
     },
 
-
+    
     /**
      * Show the datepicker.
      * Will either show the selected year/month
@@ -89,6 +98,10 @@
      * Will return the element for appending to the dom.
      */
     show : function (year, month) {
+
+      // Create text view
+      this.showText();
+
       var e = this._element = d.createElement('div');
       e.setAttribute('tabindex', 0);
       e.style.outline = 0;
@@ -97,7 +110,7 @@
       var today = new Date();
 
       // Show year
-      this._showYear = year ? year :
+      this._showYear = (year !== undefined) ? year :
 	(this._selected['year'] ? this._selected['year'] :
 	 today.getYear() + 1900);
 
@@ -110,9 +123,65 @@
       this._element.appendChild(this._monthHelper());
       this._element.appendChild(this._yearHelper());
       this._element.appendChild(this._dayHelper());
+      this._element.appendChild(this._closer());
+
       return this._element;
     },
 
+    showText : function () {
+
+      // Create element
+      this._elementText = document.createElement('div');
+      var et = this._elementText;
+      et.setAttribute('tabindex', 0);
+      et.style.outline = 0;
+      et.classList.add('value');
+
+      // Add input field
+      this._input = et.appendChild(
+	document.createElement('input')
+      );
+      this._input.value = this.toString();
+
+      // Add toggle button
+      var datepicker = et.appendChild(
+	document.createElement('div')
+      );
+
+      datepicker.onclick =
+	this.viewCalendar.bind(this);
+
+      datepicker.appendChild(
+	document.createTextNode('x')
+      );
+
+      // Check for enter
+      this._input.addEventListener(
+	'keypress',
+	function (e) {
+	  if (e.keyCode == 13) {
+	    this.fromString(this._input.value);
+	    this.store();
+	    e.halt();
+            return false;
+	  };
+	}.bind(this)
+      );
+
+      /*
+      var that = this;
+      et.addEventListener(
+	'blur',
+	function (e) {
+	  that.fromString(input.value);
+
+	  // Better: Hide!
+	  this.parentNode.removeChild(this);
+	  e.halt();
+	}
+      );
+      */
+    },
 
     /**
      * Get the HTML element associated with the datepicker.
@@ -121,6 +190,34 @@
       return this._element;
     },
 
+    elementText : function () {
+      return this._elementText;
+    },
+
+    viewText : function () {
+
+      // Replace calendar view with text view
+      this._element.parentNode.replaceChild(
+	this._elementText,
+	this._element
+      );
+    },
+
+    viewCalendar : function () {
+      // Update calendar
+      this.fromString(this._input.value);
+
+      this._updateYear();
+      this._updateMonth();
+      this._updateDay();
+
+      // Replace calendar view with text view
+      this._elementText.parentNode.replaceChild(
+	this._element,
+	this._elementText
+      );
+    },
+
 
     /**
      * Get the current date in string format.
@@ -135,6 +232,23 @@
       return str;
     },
 
+    toString : function () {
+      // There are values selected
+      var v = '';
+      var s = this._selected;
+      if (s['year']) {
+	v += s['year'];
+	if (s['month']) {
+	  v += '-';
+	  v += s['month'] < 10 ? '0' + s['month'] : s['month'];
+	  if (s['day']) {
+	    v += '-';
+	    v += s['day'] < 10 ? '0' + s['day'] : s['day'];
+	  };
+	};
+      };
+      return v;
+    },
 
     /**
      * Increment the year.
@@ -302,6 +416,15 @@
       return table;
     },
 
+    // Create the day (calendar) helper element.
+    _closer : function () {
+      var closer = d.createElement('span');
+      closer.classList.add('closer');
+      closer.appendChild(d.createTextNode('x'));
+      closer.onclick = this.viewText.bind(this);
+      return closer;
+    },
+
     _dayBody : function () {
       var showDate = new Date(
 	this._showYear,
@@ -396,6 +519,19 @@
 	this._dBElement
       );
       this._dBElement = newBody;
+    },
+
+    fromString : function (v) {
+      if (v !== undefined) {
+
+	var d = v.split('-', 3);
+	d[0] = parseInt(d[0]);
+	if (d[1]) d[1] = parseInt(d[1]);
+	if (d[2]) d[2] = parseInt(d[2]);
+
+	// Select values
+	this.select(d[0], d[1], d[2]);
+      };
     }
   };
 });
diff --git a/dev/js/src/vc/doc.js b/dev/js/src/vc/doc.js
index 07943f0..72bdeee 100644
--- a/dev/js/src/vc/doc.js
+++ b/dev/js/src/vc/doc.js
@@ -424,32 +424,14 @@
       // Show datepicker
       if (this.type() === 'date') {
 	var dp = KorAP._vcDatePicker;
-	if (v !== undefined) {
-
-	  var d = v.split('-', 3);
-	  d[0] = parseInt(d[0]);
-	  if (d[1]) d[1] = parseInt(d[1]);
-	  if (d[2]) d[2] = parseInt(d[2]);
-
-	  // Select values
-	  dp.select(d[0], d[1], d[2]);
-	};
+	dp.fromString(v)
 
 	// Todo: change 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.value(this.toString());
 	    that.update();
 	    return;
 	  };