diff --git a/devui/datepicker/datepicker.component.html b/devui/datepicker/datepicker.component.html
index c8837a50..7ca23978 100755
--- a/devui/datepicker/datepicker.component.html
+++ b/devui/datepicker/datepicker.component.html
@@ -58,6 +58,7 @@
         </td>
         <td colspan="3" class="devui-dropdown">
           <span class="devui-date-title" (click)="toggle($event, 'year')">{{ i18nText?.yearDisplay(currentYear) }}</span>
+          <span class="devui-date-title-buffer"></span>
           <span class="devui-date-title" (click)="toggle($event, 'month')" *ngIf="mode !== 'year'">{{
             (i18nText?.monthsOfYear)[currentMonthIndex]
           }}</span>
diff --git a/devui/datepicker/datepicker.component.scss b/devui/datepicker/datepicker.component.scss
index 386b7685..48e3def9 100755
--- a/devui/datepicker/datepicker.component.scss
+++ b/devui/datepicker/datepicker.component.scss
@@ -18,6 +18,10 @@
   position: relative;
 }
 
+.devui-date-title-buffer{
+  width: 0.5em;
+}
+
 .devui-month-view .devui-month-view-table {
   margin-bottom: 0;
   background: $devui-connected-overlay-bg;