diff --git a/core/css/apps.scss b/core/css/apps.scss
index fd26f46bcdbc3038f044ecef52c1b62a0edbf7eb..e4592ad94899d99b2591fff6907858423017a4c6 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -595,7 +595,8 @@ kbd {
 
 .bubble,
 .app-navigation-entry-menu,
-.popovermenu {
+.popovermenu,
+.ui-datepicker {
 	position: absolute;
 	background-color: $color-main-background;
 	color: nc-lighten($color-main-text, 20%);
diff --git a/core/css/inputs.scss b/core/css/inputs.scss
index 13a164e13f2eab38255b5f77732c18ed28a0aec2..3ea90d322bbd05fd7657989789395aa95c05a476 100644
--- a/core/css/inputs.scss
+++ b/core/css/inputs.scss
@@ -492,8 +492,9 @@ input {
 }
 
 .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
-	border: none;
-	background: nc-darken($color-main-background, 3%);
+	border: 1px solid transparent;
+	background: inherit;
+	color: $color-primary;
 }
 
 /* Animation */
diff --git a/core/css/styles.scss b/core/css/styles.scss
index 35fc300eafeff62c9209dea89fb113f28e759944..8cb3033be5116f617c8316fce5c7f7b83af13962 100644
--- a/core/css/styles.scss
+++ b/core/css/styles.scss
@@ -964,6 +964,85 @@ code {
 	background-image: url('../img/actions/play-previous.svg?v=1');
 }
 
+/* ---- jQuery UI datepicker ---- */
+.ui-widget.ui-datepicker {
+	margin-left: -110px !important;
+	margin-top: 10px;
+	border-radius: 3px;
+
+	.ui-state-default,
+	.ui-widget-content .ui-state-default,
+	.ui-widget-header .ui-state-default {
+		border: 1px solid transparent;
+		background: inherit;
+	}
+
+	.ui-state-hover,
+	.ui-state-focus {
+		background: inherit;
+		color: $color-primary;
+	}
+
+	.ui-widget-header {
+		margin: 3px 3px 3px 0;
+		padding: 7px 6px;
+		font-size: 13px;
+		border:	none; // 1px solid #dbdbdb;
+		border-radius: 3px;
+		background-color: $color-main-background;
+		color: $color-main-text;
+
+		.ui-datepicker-title {
+			line-height: 1;
+		}
+
+		.ui-icon {
+			opacity: .5;
+		}
+
+		.ui-state-hover .ui-icon {
+			opacity: 1;
+		}
+
+		.ui-icon.ui-icon-circle-triangle-e {
+			background: url("../img/actions/arrow-right.svg") center center no-repeat;
+		}
+
+		.ui-icon.ui-icon-circle-triangle-w {
+			background: url("../img/actions/arrow-left.svg") center center no-repeat;
+		}
+	}
+
+	.ui-datepicker-calendar {
+		th.ui-datepicker-week-end {
+			color: $color-primary;
+		}
+
+		td {
+			padding: 0;
+
+			a {
+				border-radius: 3px;
+				text-align: center;
+			}
+
+			&.ui-datepicker-week-end a {
+				color: $color-primary;
+			}
+
+			&.ui-datepicker-today a {
+				background-color: nc-lighten($color-main-text, 86%);
+			}
+
+			&.ui-datepicker-current-day .ui-state-active {
+				background-color: $color-primary;
+				color: $color-primary-text;
+			}
+		}
+	}
+}
+
+
 .ui-datepicker-prev, .ui-datepicker-next {
 	border: nc-lighten($color-main-text, 86%);
 	background: $color-main-background;
diff --git a/core/img/actions/arrow-left.svg b/core/img/actions/arrow-left.svg
new file mode 100644
index 0000000000000000000000000000000000000000..34b2fda2426760c9b9a04e6c36bf042b8ecc4b3d
--- /dev/null
+++ b/core/img/actions/arrow-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewbox="0 0 16 16"><path d="m5.5 8 6 6v1l-7-7 7-7v1z"/></svg>
diff --git a/core/img/actions/arrow-right.svg b/core/img/actions/arrow-right.svg
new file mode 100644
index 0000000000000000000000000000000000000000..102b9cf6b5ba2cd47f768e2b506bdadf1caf6099
--- /dev/null
+++ b/core/img/actions/arrow-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewbox="0 0 16 16"><path d="m10.5 8-6-6v-1l7 7-7 7v-1z"/></svg>
diff --git a/lib/private/legacy/template.php b/lib/private/legacy/template.php
index 4f7c11d0b64da6e543e672dc140d170f8e881c2f..f5ee23368318e10fdad59ea0489362a7ff916c0e 100644
--- a/lib/private/legacy/template.php
+++ b/lib/private/legacy/template.php
@@ -108,9 +108,9 @@ class OC_Template extends \OC\Template\Base {
 				}
 			}
 
+			OC_Util::addStyle('server', null, true);
 			OC_Util::addStyle('jquery-ui-fixes',null,true);
 			OC_Util::addVendorStyle('jquery-ui/themes/base/jquery-ui',null,true);
-			OC_Util::addStyle('server', null, true);
 			OC_Util::addVendorStyle('select2/select2', null, true);
 			OC_Util::addStyle('jquery.ocdialog');
 			OC_Util::addTranslations("core", null, true);