Merge pull request #503 from QingWei-Li/fix/date-picker-style

DatePicker: fix input style in IE, fixed #498

packages/date-picker/src/panel/date-range.vue

@@ -20,12 +20,14 @@
         <div class="el-picker-panel__body">
           <div class="el-date-range-picker__time-header" v-if="showTime">
             <span class="el-date-range-picker__editors-wrap">
-              <input
+              <span class="el-date-range-picker__time-picker-wrap">
-                placeholder="开始日期"
+                <input
-                class="el-date-range-picker__editor"
+                  placeholder="开始日期"
-                v-model.lazy="leftVisibleDate"
+                  class="el-date-range-picker__editor"
-                @input="handleDateInput($event, 'min')"
+                  v-model.lazy="leftVisibleDate"
-                @change="handleDateChange($event, 'min')"/>
+                  @input="handleDateInput($event, 'min')"
+                  @change="handleDateChange($event, 'min')"/>
+              </span>
               <span class="el-date-range-picker__time-picker-wrap">
                 <input
                   placeholder="开始时间"
@@ -44,14 +46,16 @@
             </span>
             <span class="el-icon-arrow-right"></span>
             <span class="el-date-range-picker__editors-wrap is-right">
-              <input
+              <span class="el-date-range-picker__time-picker-wrap">
-                ref="leftInput"
+                <input
-                placeholder="结束日期"
+                  ref="leftInput"
-                class="el-date-range-picker__editor"
+                  placeholder="结束日期"
-                v-model.lazy="rightVisibleDate"
+                  class="el-date-range-picker__editor"
-                :readonly="!minDate"
+                  v-model.lazy="rightVisibleDate"
-                @input="handleDateInput($event, 'max')"
+                  :readonly="!minDate"
-                @change="handleDateChange($event, 'max')" />
+                  @input="handleDateInput($event, 'max')"
+                  @change="handleDateChange($event, 'max')" />
+              </span>
               <span class="el-date-range-picker__time-picker-wrap">
                 <input
                   ref="rightInput"

packages/theme-default/src/date-picker.css

@@ -1,8 +1,8 @@
-@import "../../date-picker/src/css/date-table.css";
+@import "./date-picker/date-table.css";
-@import "../../date-picker/src/css/month-table.css";
+@import "./date-picker/month-table.css";
-@import "../../date-picker/src/css/year-table.css";
+@import "./date-picker/year-table.css";
-@import "../../date-picker/src/css/time-spinner.css";
+@import "./date-picker/time-spinner.css";
-@import "../../date-picker/src/css/picker.css";
+@import "./date-picker/picker.css";
-@import "../../date-picker/src/css/date-picker.css";
+@import "./date-picker/date-picker.css";
-@import "../../date-picker/src/css/date-range-picker.css";
+@import "./date-picker/date-range-picker.css";
-@import "../../date-picker/src/css/time-range-picker.css";
+@import "./date-picker/time-range-picker.css";

packages/theme-default/src/date-picker/date-picker.css

@@ -27,12 +27,12 @@
     }
 
     @e editor-wrap {
-      flex: 1;
       position: relative;
+      display: table-cell;
+      padding: 0 5px;
     }
 
     @e editor {
-      margin: 0 5px;
       position: relative;
       border: 1px solid #c0ccda;
       border-radius: 4px;
@@ -42,6 +42,7 @@
       outline: none;
       appearance: none;
       transition: border 0.3s;
+      width: 100%;
 
       &:hover {
         border-color: #20a0ff;
@@ -53,7 +54,9 @@
       border-bottom: 1px solid var(--datepicker-inner-border-color);
       font-size: 12px;
       padding: 8px 5px 5px 5px;
-      display: flex;
+      display: table;
+      width: 100%;
+      box-sizing: border-box;
     }
 
     @e header {

packages/theme-default/src/date-picker/date-range-picker.css

@@ -30,8 +30,6 @@
     }
 
     @e editor {
-      flex: 1;
-      margin: 0 5px;
       position: relative;
       border: 1px solid #c0ccda;
       border-radius: 4px;
@@ -41,6 +39,7 @@
       outline: none;
       appearance: none;
       transition: border 0.3s;
+      width: 100%;
 
       &:hover {
         border-color: #20a0ff;
@@ -88,14 +87,10 @@
     }
 
     @e editors-wrap {
-      padding-right: 10px;
-      display: inline-block;
-      width: 50%;
       box-sizing: border-box;
-      display: flex;
+      display: table-cell;
 
       @when right {
-        padding-left: 10px;
         text-align: right;
       }
     }
@@ -105,20 +100,22 @@
       border-bottom: 1px solid var(--datepicker-inner-border-color);
       font-size: 12px;
       padding: 8px 5px 5px 5px;
-      display: flex;
+      display: table;
+      width: 100%;
+      box-sizing: border-box;
 
       > .el-icon-arrow-right {
-        position: absolute;
-        left: 50%;
-        margin-left: -10px;
-        margin-top: 5px;
         font-size: 20px;
+        vertical-align: middle;
+        display: table-cell;
         color: var(--datepicker-icon-color);
       }
     }
 
     @e time-picker-wrap {
       position: relative;
+      display: table-cell;
+      padding: 0 5px;
 
       .el-picker-panel {
         position: absolute;

packages/theme-default/src/date-picker/time-range-picker.css

@@ -1,4 +1,4 @@
-@import '../css/vars.css';
+@import './vars.css';
 
 @component-namespace el {
   @b time-range-picker {

packages/theme-default/src/time-picker.css

@@ -1,3 +1,3 @@
-@import "../../date-picker/src/css/picker.css";
+@import "./date-picker/picker.css";
-@import "../../date-picker/src/css/time-spinner.css";
+@import "./date-picker/time-spinner.css";
-@import "../../date-picker/src/css/time-picker.css";
+@import "./date-picker/time-picker.css";

packages/theme-default/src/time-select.css

@@ -1,6 +1,6 @@
-@import "../../date-picker/src/css/picker.css";
+@import "./date-picker/picker.css";
-@import "../../date-picker/src/css/date-picker.css";
+@import "./date-picker/date-picker.css";
-@import "../../date-picker/src/css/vars.css";
+@import "./date-picker/vars.css";
 
 .time-select {
   margin: 5px 0;