diff --git a/frontend/app/services/timezone-service.js b/frontend/app/services/timezone-service.js
index 7f8176494a..27f37fb734 100644
--- a/frontend/app/services/timezone-service.js
+++ b/frontend/app/services/timezone-service.js
@@ -62,9 +62,16 @@ module.exports = function(ConfigurationService, I18n) {
     },
 
     formattedDatetime: function(datetimeString) {
+      var c = TimezoneService.formattedDatetimeComponents(datetimeString);
+      return c[0] + ' ' + c[1];
+    },
+
+    formattedDatetimeComponents: function(datetimeString) {
       var d = TimezoneService.parseDatetime(datetimeString);
-      return d.format(TimezoneService.getDateFormat()) + ' ' +
-        d.format(TimezoneService.getTimeFormat());
+      return [
+        d.format(TimezoneService.getDateFormat()),
+        d.format(TimezoneService.getTimeFormat())
+      ];
     },
 
     toHours: function(durationString) {
diff --git a/frontend/app/ui_components/date/date-time-directive.js b/frontend/app/ui_components/date/date-time-directive.js
index c5869ad329..ee557b0dc9 100644
--- a/frontend/app/ui_components/date/date-time-directive.js
+++ b/frontend/app/ui_components/date/date-time-directive.js
@@ -31,11 +31,12 @@ module.exports = function($compile, TimezoneService) {
     restrict: 'EA',
     replace: true,
     scope: { dateTimeValue: '=' },
-    template: '<span title="{{ date }} {{ time }}"><op-date date-value="dateTimeValue" hide-title="true"></op-date> <op-time time-value="dateTimeValue" hide-title="true"></op-time></span>',
+    // Note: we cannot reuse op-date here as this does not apply the user's configured timezone
+    template: '<span title="{{ date }} {{ time }}"><span>{{date}}</span> <span>{{time}}</span></span>',
     link: function(scope, element, attrs) {
-      scope.date = TimezoneService.formattedDate(scope.dateTimeValue);
-      scope.time = TimezoneService.formattedTime(scope.dateTimeValue);
-
+      var c = TimezoneService.formattedDatetimeComponents(scope.dateTimeValue);
+      scope.date = c[0];
+      scope.time = c[1];
       $compile(element.contents())(scope);
     }
   };
diff --git a/frontend/tests/unit/tests/ui_components/date-time-directive-test.js b/frontend/tests/unit/tests/ui_components/date-time-directive-test.js
index fa519a7410..5b17a8bd89 100644
--- a/frontend/tests/unit/tests/ui_components/date-time-directive-test.js
+++ b/frontend/tests/unit/tests/ui_components/date-time-directive-test.js
@@ -49,7 +49,7 @@ describe('date time Directives', function() {
   beforeEach(inject(function($rootScope, $compile, _I18n_, _TimezoneService_) {
     scope = $rootScope.$new();
 
-    scope.testDateTime = "2013-02-08T09:30:26";
+    scope.testDateTime = "2013-02-08T09:30:26Z";
 
     compile = function(html) {
       element = $compile(html)(scope);
@@ -82,6 +82,7 @@ describe('date time Directives', function() {
 
     describe('without configuration', function() {
       beforeEach(function() {
+        configurationService.isTimezoneSet = sinon.stub().returns(false);
         configurationService.dateFormatPresent = sinon.stub().returns(false);
 
         compile(html);
@@ -96,6 +97,7 @@ describe('date time Directives', function() {
 
     describe('with configuration', function() {
       beforeEach(function() {
+        configurationService.isTimezoneSet = sinon.stub().returns(false);
         configurationService.dateFormatPresent = sinon.stub().returns(true);
         configurationService.dateFormat = sinon.stub().returns("DD-MM-YYYY");
 
@@ -129,6 +131,7 @@ describe('date time Directives', function() {
 
     describe('with configuration', function() {
       beforeEach(function() {
+        configurationService.isTimezoneSet = sinon.stub().returns(false);
         configurationService.timeFormatPresent = sinon.stub().returns(true);
         configurationService.timeFormat = sinon.stub().returns("HH:mm a");
 
@@ -159,10 +162,11 @@ describe('date time Directives', function() {
 
     describe('without configuration', function() {
       beforeEach(function() {
+        configurationService.isTimezoneSet = sinon.stub().returns(false);
         configurationService.dateFormatPresent = sinon.stub().returns(false);
         configurationService.timeFormatPresent = sinon.stub().returns(false);
 
-        scope.dateTimeValue = "2013-02-08T09:30:26";
+        scope.dateTimeValue = "2013-02-08T09:30:26Z";
 
         compile(html);
       });
@@ -177,6 +181,7 @@ describe('date time Directives', function() {
 
     describe('with configuration', function() {
       beforeEach(function() {
+        configurationService.isTimezoneSet = sinon.stub().returns(false);
         configurationService.dateFormatPresent = sinon.stub().returns(true);
         configurationService.timeFormatPresent = sinon.stub().returns(true);
         configurationService.dateFormat = sinon.stub().returns("DD-MM-YYYY");