diff --git a/assets/custom-functions.js b/assets/custom-functions.js
index dcf03049c309b84833c0820b5a600af9e13e0368..7c502c128be0d8fce1a3cf1fa39104722bde1228 100644
--- a/assets/custom-functions.js
+++ b/assets/custom-functions.js
@@ -101,3 +101,12 @@ $(document).ready(function () {
                 });
 });
 
+// Move datepicker above the time series area
+$(document).ready(function () {
+        $(document).on('click', ".SingleDatePicker", function () {
+                const element = document.getElementsByClassName('DayPicker')[0];
+				element.style.position = 'absolute';
+				element.style.bottom = '78px';
+                });
+});
+
diff --git a/assets/style.css b/assets/style.css
index 829f5310f3c6201d7746547e48ca70b6a851b043..2e7e7cb4ba179b8cc0335ad249b10d19323f4f25 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -214,6 +214,7 @@ input.DateInput_input {
 
 div.SingleDatePickerInput {
     border: none;
+	background-color: #2B383E !important;
 }
 
 .SingleDatePicker_picker {
@@ -225,6 +226,41 @@ div.SingleDatePickerInput {
     z-index: 10001;
 }
 
+.SingleDatePickerInput_clearDate {
+	width: 34px;
+	height: 34px;
+	outline: none !important;
+	margin: 2px 3px 3px 5px;
+}
+
+.SingleDatePickerInput_clearDate_svg {
+	visibility: hidden;
+    fill: white;
+    height: 15px;
+    width: 15px;
+    vertical-align: inherit;
+    margin: auto;
+}
+
+.SingleDatePickerInput_clearDate:before {
+    color: white;
+    visibility: visible;
+    font-family: 'Font Awesome 5 free';
+    content: "\f303";
+    font-weight: 600;
+    vertical-align: middle;
+    font-size: 1em;
+    bottom: 4px;
+    position: relative;
+    right: 1px;
+}
+
+.SingleDatePickerInput_clearDate:hover {
+	width: 34px;
+	height: 34px;
+	background-color: #F1B545 !important;
+}
+
 #was-slider-graph, #prob-slider-graph, #obs-vis-slider-graph {
     width: 10rem;
     padding: 0.4rem 35px 25px !important;
@@ -756,3 +792,4 @@ div.SingleDatePickerInput {
 	position: absolute;
 	right: 5px;
 }
+
diff --git a/tabs/forecast.py b/tabs/forecast.py
index 0ac932f7de6386b273fc17a813193f7f74b2b6bd..73daf40d4c81f2cf033ed8e672ec4d139c6697b0 100644
--- a/tabs/forecast.py
+++ b/tabs/forecast.py
@@ -134,7 +134,9 @@ time_slider = html.Div([
             initial_visible_month=dt.strptime(end_date, "%Y%m%d"),
             display_format='DD MMM YYYY',
             date=end_date,
-            with_portal=True,
+            clearable=True,
+            placeholder='DD MON YYYY',
+            reopen_calendar_on_clear=True,
         ),
         className="timesliderline",
     ),
@@ -177,7 +179,9 @@ prob_time_slider = html.Div([
             initial_visible_month=dt.strptime(end_date, "%Y%m%d"),
             display_format='DD MMM YYYY',
             date=end_date,
-            with_portal=True,
+            clearable=True,
+            placeholder='DD MON YYYY',
+            reopen_calendar_on_clear=True,
         ),
         className="timesliderline",
     ),
@@ -208,7 +212,9 @@ was_time_slider = html.Div([
             initial_visible_month=dt.strptime(end_date, "%Y%m%d"),
             display_format='DD MMM YYYY',
             date=end_date,
-            with_portal=True,
+            clearable=True,
+            placeholder='DD MON YYYY',
+            reopen_calendar_on_clear=True,
         ),
         className="timesliderline",
     ),
diff --git a/tabs/observations.py b/tabs/observations.py
index d182a87c76c7b07bb8175602cd5f194e086dda09..0ab95808500b743e1cdb9d67b89f00d452936bee 100644
--- a/tabs/observations.py
+++ b/tabs/observations.py
@@ -57,7 +57,9 @@ def obs_time_slider(div='obs', start=0, end=23, step=1):
             display_format='DD MMM YYYY',
             # date=(dt.strptime(edate, "%Y%m%d") - timedelta(days=1)).strftime("%Y%m%d"),
             date=dt.strptime(edate, "%Y%m%d").strftime("%Y%m%d"),
-            with_portal=True,
+            clearable=True,
+            placeholder='DD MON YYYY',
+            reopen_calendar_on_clear=True,
         ),
         className="timesliderline",
     )