diff --git a/addons/web/static/src/js/widgets/date_picker.js b/addons/web/static/src/js/widgets/date_picker.js
index 3f528fe7c37..06d329282c8 100644
--- a/addons/web/static/src/js/widgets/date_picker.js
+++ b/addons/web/static/src/js/widgets/date_picker.js
@@ -42,7 +42,7 @@ var DateWidget = Widget.extend({
                 next: 'fa fa-chevron-right',
                 today: 'fa fa-calendar-check-o',
                 clear: 'fa fa-delete',
-                close: 'fa fa-times'
+                close: 'fa fa-check primary',
             },
             calendarWeeks: true,
             buttons: {
diff --git a/addons/web/static/src/scss/datepicker.scss b/addons/web/static/src/scss/datepicker.scss
index 7232b8c97a8..efc09b2d790 100644
--- a/addons/web/static/src/scss/datepicker.scss
+++ b/addons/web/static/src/scss/datepicker.scss
@@ -84,6 +84,20 @@ div.dropdown-menu.bootstrap-datetimepicker-widget{
     }
 }
 
+.picker-switch {
+    span.fa {
+        margin: 0;
+        @include transition($btn-transition);
+        &.primary {
+            background-color: $o-brand-primary;
+            color: white;
+            &:hover {
+                background-color: darken($o-brand-primary, 10%);
+            }
+        }
+    }
+}
+
 // This is rtl language specific fix
 // it will fix the user agent stylesheet padding
 // and transform the prev and next icons