Correct time layout when showing week numbers

Sergio Crisostomo
1 parent 1ba0bb6e
Showing 2 changed files with 12 additions and 3 deletions Show diff stats
src/components/date-picker/panel/Date/date-range.vue
src/styles/components/date-picker.less
@@ -6,7 +6,7 @@
                 v-for="shortcut in shortcuts"
                 @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
         </div>
-        <div :class="[prefixCls + '-body']">
+        <div :class="panelBodyClasses">
             <div :class="[prefixCls + '-content', prefixCls + '-content-left']" v-show="!isTime">
                 <div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
                     <span
@@ -171,6 +171,15 @@
                     }
                 ];
             },
+            panelBodyClasses(){
+                return [
+                    prefixCls + '-body',
+                    {
+                        [prefixCls + '-body-time']: this.showTime,
+                        [prefixCls + '-body-date']: !this.showTime,
+                    }
+                ]
+            },
             leftDatePanelLabel(){
                 return this.panelLabelConfig('left');
             },
@@ -205,7 +205,7 @@
  
     &-with-week-numbers{
         .@{picker-prefix-cls}-panel{
-            &-body{
+            &-body-date {
                 min-width: (@date-picker-cells-width-with-weeknumbers + 20) * 2;
             }
         }
@@ -294,4 +294,4 @@
             cursor: @cursor-disabled;
         }
     }
-}
 \ No newline at end of file
+}