diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 015a892d9..afb1f48e8 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -1261,6 +1261,10 @@ StScrollBar StButton#vhandle:active {
     color: #eeeeec;
 }
 
+.datemenu-date-label:focus {
+    background-color: #999999;
+}
+
 .calendar-day-base {
     font-size: 9pt;
     text-align: center;
diff --git a/js/ui/dateMenu.js b/js/ui/dateMenu.js
index 7c1a5977b..bd72a665c 100644
--- a/js/ui/dateMenu.js
+++ b/js/ui/dateMenu.js
@@ -50,6 +50,7 @@ const DateMenuButton = new Lang.Class({
         this.parent(menuAlignment);
 
         this._clockDisplay = new St.Label({ y_align: Clutter.ActorAlign.CENTER });
+        this.actor.label_actor = this._clockDisplay;
         this.actor.add_actor(this._clockDisplay);
         this.actor.add_style_class_name ('clock-display');
 
@@ -62,9 +63,8 @@ const DateMenuButton = new Lang.Class({
         hbox.add(vbox);
 
         // Date
-        this._date = new St.Label();
-        this.actor.label_actor = this._clockDisplay;
-        this._date.style_class = 'datemenu-date-label';
+        this._date = new St.Label({ style_class: 'datemenu-date-label',
+                                    can_focus: true });
         vbox.add(this._date);
 
         this._eventList = new Calendar.EventsList();