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: {
diff --git a/lib/Kalamar/API.pm b/lib/Kalamar/API.pm
index 578cdc0..63362ea 100644
--- a/lib/Kalamar/API.pm
+++ b/lib/Kalamar/API.pm
@@ -1,4 +1,4 @@
-package Kalamar::API;
+#package Kalamar::API;
 use Mojo::Base 'Mojolicious::Plugin';
 use Scalar::Util qw/blessed weaken/;
 use strict;
@@ -78,7 +78,7 @@
   $index->api_request($url->to_string);
 
   # Create new user agent and set timeout to 2 minutes
-  my $ua = $c->ua; # Mojo::UserAgent->new;
+  my $ua = $c->ua;
   $ua->inactivity_timeout(120);
 
   # Debugging
@@ -95,6 +95,7 @@
 	return $cb->($index);
       });
   }
+
   # Search blocking
   else {
     my $tx = $ua->get($url);
@@ -169,6 +170,9 @@
 
   my $url = Mojo::URL->new($index->api);
 
+  # Legacy: In old versions, doc_id contained text_id
+  $param{doc_id} .= '.' . $param{text_id} if $param{text_id};
+
   # Use hash slice to create path
   $url->path(join('/', 'corpus', @param{qw/corpus_id doc_id match_id/}, 'matchInfo'));
 
@@ -208,7 +212,7 @@
 };
 
 
-# Trace query serialization
+# Get resource information
 sub resource {
   my $self = shift;
   my $index = shift;
@@ -225,14 +229,16 @@
   my $type = $param{type} // 'collection';
   $type = 'virtualcollection' if $type eq 'collection';
 
+  # Create resource URL
   my $url = Mojo::URL->new($index->api)->path($type);
 
+  # Debugging
   $c->app->log->debug('Get resource info on '. $url);
 
   # Check for cached information
   if (my $json = $c->chi->get($url->to_string)) {
 
-    # TODO: That's unfortunate, as it prohibits multiple resources
+    # TODO: That's unfortunate, as it prohibits caching of multiple resources
     $c->app->log->debug('Get resource info from cache');
     $c->stash('search.resource' => $json);
     return $cb->($index) if $cb;
@@ -245,6 +251,7 @@
   my $ua = $c->ua; # Mojo::UserAgent->new;
   $ua->inactivity_timeout(30);
 
+  # Get resource information async
   if ($cb) {
     weaken $index;
     $ua->get(
@@ -253,6 +260,8 @@
 	return $cb->($index);
       })
   }
+
+  # Get resource information blocking
   else {
     my $tx = $ua->get($url);
     $self->_process_response('resource', $index, $tx);
@@ -321,6 +330,7 @@
 };
 
 
+# Handle match results
 sub _process_response_matches {
   my ($self, $index, $json) = @_;
 
@@ -364,12 +374,14 @@
 };
 
 
-# Process query serialization response
+# Process trace response
 sub _process_response_trace {
   my ($self, $index, $json) = @_;
   $index->query_jsonld($json);
 };
 
+
+# Process resource response
 sub _process_response_resource {
   my ($self, $index, $json) = @_;
   my $c = $index->controller;
@@ -381,7 +393,7 @@
 };
 
 
-# Parse the error messages
+# Parse error messages and forward them to the user
 sub _notify_on_error {
   my ($self, $c, $failure, $res) = @_;
   my $json = $res;
@@ -440,10 +452,16 @@
   my $x = shift or return;
   $x->{ID} =~ s/^match\-[^!]+![^-]+-//;
   $x->{docID} =~ s/^[^_]+_//;
+
+  # Legacy: In old versions the text_id was part of the doc_id
+  unless ($x->{textID}) {
+    ($x->{docID}, $x->{textID}) = split '.', $x->{docID};
+  };
   $x;
 };
 
 
+# Build query url
 sub _query_url {
   my ($index, %param) = @_;
 
diff --git a/lib/Kalamar/Controller/Search.pm b/lib/Kalamar/Controller/Search.pm
index 4e18e28..494634f 100644
--- a/lib/Kalamar/Controller/Search.pm
+++ b/lib/Kalamar/Controller/Search.pm
@@ -59,8 +59,6 @@
     # Collected search
     sub {
 
-
-
       # Render to the template
       return $c->render(template => $template);
     }
@@ -99,6 +97,7 @@
   # Use the API for fetching matching information non-blocking
   $c->search->match(
     corpus_id => $c->stash('corpus_id'),
+    text_id   => $c->stash('text_id'),
     doc_id    => $c->stash('doc_id'),
     match_id  => $c->stash('match_id'),
     %query,
diff --git a/templates/match.html.ep b/templates/match.html.ep
index 8693511..d6e3794 100644
--- a/templates/match.html.ep
+++ b/templates/match.html.ep
@@ -2,7 +2,7 @@
 % my $id = $match->{corpusID} . '-' . $match->{docID} . '-' . $match->{ID};
 <li data-corpus-id="<%= $match->{corpusID} %>"
     data-doc-id="<%= $match->{docID} %>"
-    data-text-id="hmmm"
+    data-text-id="<%= $match->{textID} %>"
     data-match-id="<%= $match->{ID} %>"
     %# TODO: This needs to be retrieved per match 
     data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"