From e69b9b7d5a3809073d1f930e5b305ebc1320023b Mon Sep 17 00:00:00 2001
From: mengxiong10 <15623530290@163.com>
Date: Thu, 21 Nov 2019 12:43:14 +0800
Subject: [PATCH] fix:  ie style compatible

---
 .../__snapshots__/date-picker.test.js.snap    |  24 +-
 .../__snapshots__/time-panel.test.js.snap     | 902 +++++++++---------
 .../__snapshots__/time-range.test.js.snap     |  46 +-
 src/date-picker.vue                           |   2 +-
 src/style/index.scss                          |  52 +-
 src/time/list-columns.vue                     |   4 +-
 src/time/list-options.vue                     |  20 +-
 7 files changed, 528 insertions(+), 522 deletions(-)

diff --git a/__test__/__snapshots__/date-picker.test.js.snap b/__test__/__snapshots__/date-picker.test.js.snap
index a9c8ce8c..bad43443 100644
--- a/__test__/__snapshots__/date-picker.test.js.snap
+++ b/__test__/__snapshots__/date-picker.test.js.snap
@@ -30,18 +30,18 @@ exports[`DatePicker prop: attrs of input 1`] = `
     <!---->
      
     <div
-      class="mx-datepicker-content-wrapper"
+      class="mx-datepicker-content"
     >
       <!---->
        
       <div
-        class="mx-datepicker-content"
+        class="mx-datepicker-body"
       >
         <div />
       </div>
+       
+      <!---->
     </div>
-     
-    <!---->
   </popup-stub>
 </div>
 `;
@@ -76,18 +76,18 @@ exports[`DatePicker prop: clearable 1`] = `
     <!---->
      
     <div
-      class="mx-datepicker-content-wrapper"
+      class="mx-datepicker-content"
     >
       <!---->
        
       <div
-        class="mx-datepicker-content"
+        class="mx-datepicker-body"
       >
         <div />
       </div>
+       
+      <!---->
     </div>
-     
-    <!---->
   </popup-stub>
 </div>
 `;
@@ -127,18 +127,18 @@ exports[`DatePicker prop: editable 1`] = `
     <!---->
      
     <div
-      class="mx-datepicker-content-wrapper"
+      class="mx-datepicker-content"
     >
       <!---->
        
       <div
-        class="mx-datepicker-content"
+        class="mx-datepicker-body"
       >
         <div />
       </div>
+       
+      <!---->
     </div>
-     
-    <!---->
   </popup-stub>
 </div>
 `;
diff --git a/__test__/__snapshots__/time-panel.test.js.snap b/__test__/__snapshots__/time-panel.test.js.snap
index ea7b12d6..506dfc6a 100644
--- a/__test__/__snapshots__/time-panel.test.js.snap
+++ b/__test__/__snapshots__/time-panel.test.js.snap
@@ -17,157 +17,153 @@ exports[`TimePanel render: correct 12hours in the fixed time list 1`] = `
         class="mx-scrollbar-wrap"
         style="margin-right: -0px;"
       >
-        <ul
-          class="mx-time-list"
+        <div
+          class="mx-time-option"
         >
-          <li
-            class="cell"
-          >
-            
-      08:30 AM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      09:00 AM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      09:30 AM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      10:00 AM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      10:30 AM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      11:00 AM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      11:30 AM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      12:00 PM
-    
-          </li>
-          <li
-            class="cell active"
-          >
-            
-      12:30 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      01:00 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      01:30 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      02:00 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      02:30 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      03:00 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      03:30 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      04:00 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      04:30 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      05:00 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      05:30 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      06:00 PM
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      06:30 PM
-    
-          </li>
-        </ul>
+          
+    08:30 AM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    09:00 AM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    09:30 AM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    10:00 AM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    10:30 AM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    11:00 AM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    11:30 AM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    12:00 PM
+  
+        </div>
+        <div
+          class="mx-time-option active"
+        >
+          
+    12:30 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    01:00 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    01:30 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    02:00 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    02:30 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    03:00 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    03:30 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    04:00 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    04:30 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    05:00 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    05:30 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    06:00 PM
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    06:30 PM
+  
+        </div>
       </div>
        
       <div
@@ -203,11 +199,12 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
           style="margin-right: -0px;"
         >
           <ul
+            class="mx-time-list"
             data-index="0"
             data-type="hour"
           >
             <li
-              class="cell disabled"
+              class="mx-time-item disabled"
               data-index="0"
             >
               
@@ -215,7 +212,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell disabled"
+              class="mx-time-item disabled"
               data-index="1"
             >
               
@@ -223,7 +220,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell disabled"
+              class="mx-time-item disabled"
               data-index="2"
             >
               
@@ -231,7 +228,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell disabled"
+              class="mx-time-item disabled"
               data-index="3"
             >
               
@@ -239,7 +236,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell disabled"
+              class="mx-time-item disabled"
               data-index="4"
             >
               
@@ -247,7 +244,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell disabled"
+              class="mx-time-item disabled"
               data-index="5"
             >
               
@@ -255,7 +252,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell disabled"
+              class="mx-time-item disabled"
               data-index="6"
             >
               
@@ -263,7 +260,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell disabled"
+              class="mx-time-item disabled"
               data-index="7"
             >
               
@@ -271,7 +268,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell disabled"
+              class="mx-time-item disabled"
               data-index="8"
             >
               
@@ -279,7 +276,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell disabled"
+              class="mx-time-item disabled"
               data-index="9"
             >
               
@@ -287,7 +284,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="10"
             >
               
@@ -295,7 +292,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="11"
             >
               
@@ -303,7 +300,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell active"
+              class="mx-time-item active"
               data-index="12"
             >
               
@@ -311,7 +308,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="13"
             >
               
@@ -319,7 +316,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="14"
             >
               
@@ -327,7 +324,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="15"
             >
               
@@ -335,7 +332,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="16"
             >
               
@@ -343,7 +340,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="17"
             >
               
@@ -351,7 +348,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="18"
             >
               
@@ -359,7 +356,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="19"
             >
               
@@ -367,7 +364,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="20"
             >
               
@@ -375,7 +372,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="21"
             >
               
@@ -383,7 +380,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="22"
             >
               
@@ -391,7 +388,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="23"
             >
               
@@ -418,11 +415,12 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
           style="margin-right: -0px;"
         >
           <ul
+            class="mx-time-list"
             data-index="1"
             data-type="minute"
           >
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="0"
             >
               
@@ -430,7 +428,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="1"
             >
               
@@ -438,7 +436,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="2"
             >
               
@@ -446,7 +444,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="3"
             >
               
@@ -454,7 +452,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="4"
             >
               
@@ -462,7 +460,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="5"
             >
               
@@ -470,7 +468,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="6"
             >
               
@@ -478,7 +476,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="7"
             >
               
@@ -486,7 +484,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="8"
             >
               
@@ -494,7 +492,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="9"
             >
               
@@ -502,7 +500,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="10"
             >
               
@@ -510,7 +508,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="11"
             >
               
@@ -518,7 +516,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="12"
             >
               
@@ -526,7 +524,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="13"
             >
               
@@ -534,7 +532,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="14"
             >
               
@@ -542,7 +540,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="15"
             >
               
@@ -550,7 +548,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="16"
             >
               
@@ -558,7 +556,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="17"
             >
               
@@ -566,7 +564,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="18"
             >
               
@@ -574,7 +572,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="19"
             >
               
@@ -582,7 +580,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="20"
             >
               
@@ -590,7 +588,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="21"
             >
               
@@ -598,7 +596,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="22"
             >
               
@@ -606,7 +604,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="23"
             >
               
@@ -614,7 +612,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="24"
             >
               
@@ -622,7 +620,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="25"
             >
               
@@ -630,7 +628,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="26"
             >
               
@@ -638,7 +636,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="27"
             >
               
@@ -646,7 +644,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="28"
             >
               
@@ -654,7 +652,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="29"
             >
               
@@ -662,7 +660,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell active"
+              class="mx-time-item active"
               data-index="30"
             >
               
@@ -670,7 +668,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="31"
             >
               
@@ -678,7 +676,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="32"
             >
               
@@ -686,7 +684,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="33"
             >
               
@@ -694,7 +692,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="34"
             >
               
@@ -702,7 +700,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="35"
             >
               
@@ -710,7 +708,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="36"
             >
               
@@ -718,7 +716,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="37"
             >
               
@@ -726,7 +724,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="38"
             >
               
@@ -734,7 +732,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="39"
             >
               
@@ -742,7 +740,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="40"
             >
               
@@ -750,7 +748,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="41"
             >
               
@@ -758,7 +756,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="42"
             >
               
@@ -766,7 +764,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="43"
             >
               
@@ -774,7 +772,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="44"
             >
               
@@ -782,7 +780,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="45"
             >
               
@@ -790,7 +788,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="46"
             >
               
@@ -798,7 +796,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="47"
             >
               
@@ -806,7 +804,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="48"
             >
               
@@ -814,7 +812,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="49"
             >
               
@@ -822,7 +820,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="50"
             >
               
@@ -830,7 +828,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="51"
             >
               
@@ -838,7 +836,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="52"
             >
               
@@ -846,7 +844,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="53"
             >
               
@@ -854,7 +852,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="54"
             >
               
@@ -862,7 +860,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="55"
             >
               
@@ -870,7 +868,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="56"
             >
               
@@ -878,7 +876,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="57"
             >
               
@@ -886,7 +884,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="58"
             >
               
@@ -894,7 +892,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="59"
             >
               
@@ -921,11 +919,12 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
           style="margin-right: -0px;"
         >
           <ul
+            class="mx-time-list"
             data-index="2"
             data-type="second"
           >
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="0"
             >
               
@@ -933,7 +932,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="1"
             >
               
@@ -941,7 +940,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="2"
             >
               
@@ -949,7 +948,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="3"
             >
               
@@ -957,7 +956,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="4"
             >
               
@@ -965,7 +964,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="5"
             >
               
@@ -973,7 +972,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="6"
             >
               
@@ -981,7 +980,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="7"
             >
               
@@ -989,7 +988,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="8"
             >
               
@@ -997,7 +996,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="9"
             >
               
@@ -1005,7 +1004,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="10"
             >
               
@@ -1013,7 +1012,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="11"
             >
               
@@ -1021,7 +1020,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="12"
             >
               
@@ -1029,7 +1028,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="13"
             >
               
@@ -1037,7 +1036,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="14"
             >
               
@@ -1045,7 +1044,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="15"
             >
               
@@ -1053,7 +1052,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="16"
             >
               
@@ -1061,7 +1060,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="17"
             >
               
@@ -1069,7 +1068,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="18"
             >
               
@@ -1077,7 +1076,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="19"
             >
               
@@ -1085,7 +1084,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="20"
             >
               
@@ -1093,7 +1092,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="21"
             >
               
@@ -1101,7 +1100,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="22"
             >
               
@@ -1109,7 +1108,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="23"
             >
               
@@ -1117,7 +1116,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="24"
             >
               
@@ -1125,7 +1124,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="25"
             >
               
@@ -1133,7 +1132,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="26"
             >
               
@@ -1141,7 +1140,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="27"
             >
               
@@ -1149,7 +1148,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="28"
             >
               
@@ -1157,7 +1156,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="29"
             >
               
@@ -1165,7 +1164,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell active"
+              class="mx-time-item active"
               data-index="30"
             >
               
@@ -1173,7 +1172,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="31"
             >
               
@@ -1181,7 +1180,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="32"
             >
               
@@ -1189,7 +1188,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="33"
             >
               
@@ -1197,7 +1196,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="34"
             >
               
@@ -1205,7 +1204,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="35"
             >
               
@@ -1213,7 +1212,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="36"
             >
               
@@ -1221,7 +1220,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="37"
             >
               
@@ -1229,7 +1228,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="38"
             >
               
@@ -1237,7 +1236,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="39"
             >
               
@@ -1245,7 +1244,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="40"
             >
               
@@ -1253,7 +1252,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="41"
             >
               
@@ -1261,7 +1260,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="42"
             >
               
@@ -1269,7 +1268,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="43"
             >
               
@@ -1277,7 +1276,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="44"
             >
               
@@ -1285,7 +1284,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="45"
             >
               
@@ -1293,7 +1292,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="46"
             >
               
@@ -1301,7 +1300,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="47"
             >
               
@@ -1309,7 +1308,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="48"
             >
               
@@ -1317,7 +1316,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="49"
             >
               
@@ -1325,7 +1324,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="50"
             >
               
@@ -1333,7 +1332,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="51"
             >
               
@@ -1341,7 +1340,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="52"
             >
               
@@ -1349,7 +1348,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="53"
             >
               
@@ -1357,7 +1356,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="54"
             >
               
@@ -1365,7 +1364,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="55"
             >
               
@@ -1373,7 +1372,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="56"
             >
               
@@ -1381,7 +1380,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="57"
             >
               
@@ -1389,7 +1388,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="58"
             >
               
@@ -1397,7 +1396,7 @@ exports[`TimePanel render: correct classes of the columns 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="59"
             >
               
@@ -1437,157 +1436,153 @@ exports[`TimePanel render: correct classes of the fixed time list 1`] = `
         class="mx-scrollbar-wrap"
         style="margin-right: -0px;"
       >
-        <ul
-          class="mx-time-list"
+        <div
+          class="mx-time-option disabled"
         >
-          <li
-            class="cell disabled"
-          >
-            
-      08:30
-    
-          </li>
-          <li
-            class="cell disabled"
-          >
-            
-      09:00
-    
-          </li>
-          <li
-            class="cell disabled"
-          >
-            
-      09:30
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      10:00
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      10:30
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      11:00
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      11:30
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      12:00
-    
-          </li>
-          <li
-            class="cell active"
-          >
-            
-      12:30
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      13:00
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      13:30
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      14:00
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      14:30
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      15:00
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      15:30
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      16:00
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      16:30
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      17:00
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      17:30
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      18:00
-    
-          </li>
-          <li
-            class="cell"
-          >
-            
-      18:30
-    
-          </li>
-        </ul>
+          
+    08:30
+  
+        </div>
+        <div
+          class="mx-time-option disabled"
+        >
+          
+    09:00
+  
+        </div>
+        <div
+          class="mx-time-option disabled"
+        >
+          
+    09:30
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    10:00
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    10:30
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    11:00
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    11:30
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    12:00
+  
+        </div>
+        <div
+          class="mx-time-option active"
+        >
+          
+    12:30
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    13:00
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    13:30
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    14:00
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    14:30
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    15:00
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    15:30
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    16:00
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    16:30
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    17:00
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    17:30
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    18:00
+  
+        </div>
+        <div
+          class="mx-time-option"
+        >
+          
+    18:30
+  
+        </div>
       </div>
        
       <div
@@ -1623,11 +1618,12 @@ exports[`TimePanel render: correct columns by format 1`] = `
           style="margin-right: -0px;"
         >
           <ul
+            class="mx-time-list"
             data-index="0"
             data-type="hour"
           >
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="0"
             >
               
@@ -1635,7 +1631,7 @@ exports[`TimePanel render: correct columns by format 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="1"
             >
               
@@ -1643,7 +1639,7 @@ exports[`TimePanel render: correct columns by format 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="2"
             >
               
@@ -1651,7 +1647,7 @@ exports[`TimePanel render: correct columns by format 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="3"
             >
               
@@ -1678,11 +1674,12 @@ exports[`TimePanel render: correct columns by format 1`] = `
           style="margin-right: -0px;"
         >
           <ul
+            class="mx-time-list"
             data-index="1"
             data-type="minute"
           >
             <li
-              class="cell active"
+              class="mx-time-item active"
               data-index="0"
             >
               
@@ -1690,7 +1687,7 @@ exports[`TimePanel render: correct columns by format 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="1"
             >
               
@@ -1717,11 +1714,12 @@ exports[`TimePanel render: correct columns by format 1`] = `
           style="margin-right: -0px;"
         >
           <ul
+            class="mx-time-list"
             data-index="2"
             data-type="ampm"
           >
             <li
-              class="cell active"
+              class="mx-time-item active"
               data-index="0"
             >
               
@@ -1729,7 +1727,7 @@ exports[`TimePanel render: correct columns by format 1`] = `
       
             </li>
             <li
-              class="cell"
+              class="mx-time-item"
               data-index="1"
             >
               
diff --git a/__test__/__snapshots__/time-range.test.js.snap b/__test__/__snapshots__/time-range.test.js.snap
index 962a9422..c0251a1f 100644
--- a/__test__/__snapshots__/time-range.test.js.snap
+++ b/__test__/__snapshots__/time-range.test.js.snap
@@ -24,11 +24,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
             style="margin-right: -0px;"
           >
             <ul
+              class="mx-time-list"
               data-index="0"
               data-type="hour"
             >
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="0"
               >
                 
@@ -36,7 +37,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="1"
               >
                 
@@ -44,7 +45,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="2"
               >
                 
@@ -52,7 +53,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="3"
               >
                 
@@ -60,7 +61,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell active"
+                class="mx-time-item active"
                 data-index="4"
               >
                 
@@ -68,7 +69,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="5"
               >
                 
@@ -95,11 +96,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
             style="margin-right: -0px;"
           >
             <ul
+              class="mx-time-list"
               data-index="1"
               data-type="minute"
             >
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="0"
               >
                 
@@ -107,7 +109,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell active"
+                class="mx-time-item active"
                 data-index="1"
               >
                 
@@ -134,11 +136,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
             style="margin-right: -0px;"
           >
             <ul
+              class="mx-time-list"
               data-index="2"
               data-type="ampm"
             >
               <li
-                class="cell active"
+                class="mx-time-item active"
                 data-index="0"
               >
                 
@@ -146,7 +149,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="1"
               >
                 
@@ -187,11 +190,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
             style="margin-right: -0px;"
           >
             <ul
+              class="mx-time-list"
               data-index="0"
               data-type="hour"
             >
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="0"
               >
                 
@@ -199,7 +203,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="1"
               >
                 
@@ -207,7 +211,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="2"
               >
                 
@@ -215,7 +219,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell active"
+                class="mx-time-item active"
                 data-index="3"
               >
                 
@@ -223,7 +227,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="4"
               >
                 
@@ -231,7 +235,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="5"
               >
                 
@@ -258,11 +262,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
             style="margin-right: -0px;"
           >
             <ul
+              class="mx-time-list"
               data-index="1"
               data-type="minute"
             >
               <li
-                class="cell"
+                class="mx-time-item"
                 data-index="0"
               >
                 
@@ -270,7 +275,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell active"
+                class="mx-time-item active"
                 data-index="1"
               >
                 
@@ -297,11 +302,12 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
             style="margin-right: -0px;"
           >
             <ul
+              class="mx-time-list"
               data-index="2"
               data-type="ampm"
             >
               <li
-                class="cell disabled"
+                class="mx-time-item disabled"
                 data-index="0"
               >
                 
@@ -309,7 +315,7 @@ exports[`TimeRange render: correct classes of the columns 1`] = `
       
               </li>
               <li
-                class="cell active"
+                class="mx-time-item active"
                 data-index="1"
               >
                 
diff --git a/src/date-picker.vue b/src/date-picker.vue
index e3049e8d..12c36bbb 100644
--- a/src/date-picker.vue
+++ b/src/date-picker.vue
@@ -258,7 +258,7 @@ export default {
       return this.value2date(this.value);
     },
     text() {
-      if (this.userInput !== null) {
+      if (this.userInput) {
         return this.userInput;
       }
       if (!this.isValidValue(this.innerValue)) {
diff --git a/src/style/index.scss b/src/style/index.scss
index af530bd9..de261204 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -102,7 +102,6 @@
   color: $default-color;
   background-color: #fff;
   border: 1px solid $border-color;
-  display: flex;
 }
 
 .mx-datepicker-popup {
@@ -114,11 +113,16 @@
 }
 
 .mx-datepicker-sidebar {
+  float: left;
   box-sizing: border-box;
   width: 100px;
   padding: 6px;
   overflow: auto;
-  border-right: 1px solid $border-color;
+}
+
+.mx-datepicker-sidebar + .mx-datepicker-content {
+  margin-left: 100px;
+  border-left: 1px solid $border-color;
 }
 
 .mx-datepicker-body {
@@ -308,8 +312,7 @@
   &:first-child {
     border-left: 0;
   }
-
-  ul {
+  .mx-time-list {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -319,29 +322,11 @@
       height: 32 * 6px;
     }
   }
-
-  li {
+  .mx-time-item {
+    cursor: pointer;
     font-size: 12px;
     height: 32px;
     line-height: 32px;
-  }
-}
-
-.mx-time-list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  li {
-    padding: 8px 10px;
-    font-size: 14px;
-    line-height: 20px;
-  }
-}
-
-.mx-time-list,
-.mx-time-column {
-  li {
-    cursor: pointer;
     &:hover {
       background-color: $hover-color;
     }
@@ -356,3 +341,22 @@
     }
   }
 }
+
+.mx-time-option {
+  cursor: pointer;
+  padding: 8px 10px;
+  font-size: 14px;
+  line-height: 20px;
+  &:hover {
+    background-color: $hover-color;
+  }
+  &.active {
+    color: $primary-color;
+    font-weight: 700;
+  }
+  &.disabled {
+    cursor: not-allowed;
+    color: #ccc;
+    background-color: #f3f3f3;
+  }
+}
diff --git a/src/time/list-columns.vue b/src/time/list-columns.vue
index 516b7aaa..bc2a3b84 100644
--- a/src/time/list-columns.vue
+++ b/src/time/list-columns.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="mx-time-columns">
     <scrollbar-vertical v-for="(col, i) in columns" :key="i" class="mx-time-column">
-      <ul :data-type="col.type" :data-index="i" @click="handleSelect">
+      <ul class="mx-time-list" :data-type="col.type" :data-index="i" @click="handleSelect">
         <li
           v-for="(item, j) in col.list"
           :key="item.value"
-          class="cell"
+          class="mx-time-item"
           :data-index="j"
           :class="getClasses(item.value)"
         >
diff --git a/src/time/list-options.vue b/src/time/list-options.vue
index 43a1abb2..330d512a 100644
--- a/src/time/list-options.vue
+++ b/src/time/list-options.vue
@@ -1,16 +1,14 @@
 <template>
   <scrollbar-vertical>
-    <ul class="mx-time-list">
-      <li
-        v-for="item in list"
-        :key="item.value"
-        class="cell"
-        :class="getClasses(item.value)"
-        @click="handleSelect(item.value)"
-      >
-        {{ item.text }}
-      </li>
-    </ul>
+    <div
+      v-for="item in list"
+      :key="item.value"
+      class="mx-time-option"
+      :class="getClasses(item.value)"
+      @click="handleSelect(item.value)"
+    >
+      {{ item.text }}
+    </div>
   </scrollbar-vertical>
 </template>