diff --git a/src/DatePicker.tsx b/src/DatePicker.tsx
index f9fb788..1161366 100644
--- a/src/DatePicker.tsx
+++ b/src/DatePicker.tsx
@@ -114,7 +114,7 @@ export default class DatePicker extends Component {
         this.setTransform(this.panel.style, `translate3d(0,0,0)`);
         this.setTransition(this.panel.style, '.3s');
         setTimeout(() => {
-          this.setTransition(this.panel.style, '');
+          this.panel && this.setTransition(this.panel.style, '');
         }, 300);
       }
     };
diff --git a/tests/__snapshots__/Calendar.spec.tsx.snap b/tests/__snapshots__/Calendar.spec.tsx.snap
index 30f6b4e..b2be261 100644
--- a/tests/__snapshots__/Calendar.spec.tsx.snap
+++ b/tests/__snapshots__/Calendar.spec.tsx.snap
@@ -57,37 +57,37 @@ exports[`Calendar english. renders correctly 1`] = `
           <div
             class="cell cell-grey"
           >
-            日
+            Sun
           </div>
           <div
             class="cell"
           >
-            一
+            Mon
           </div>
           <div
             class="cell"
           >
-            二
+            Tue
           </div>
           <div
             class="cell"
           >
-            三
+            Wed
           </div>
           <div
             class="cell"
           >
-            四
+            Thu
           </div>
           <div
             class="cell"
           >
-            五
+            Fir
           </div>
           <div
             class="cell cell-grey"
           >
-            六
+            Sat
           </div>
         </div>
         <div
diff --git a/tests/__snapshots__/DatePicker.spec.tsx.snap b/tests/__snapshots__/DatePicker.spec.tsx.snap
index eb09627..bd2e9e7 100644
--- a/tests/__snapshots__/DatePicker.spec.tsx.snap
+++ b/tests/__snapshots__/DatePicker.spec.tsx.snap
@@ -64,7 +64,7 @@ exports[`DatePicker renders correctly 1`] = `
           <div
             class="month-title"
           >
-            2017年10月
+            2018年06月
           </div>
           <div
             class="date"
@@ -83,9 +83,7 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date grey"
-                  >
-                    1
-                  </div>
+                  />
                   <span
                     class="right"
                   />
@@ -105,9 +103,7 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  >
-                    2
-                  </div>
+                  />
                   <span
                     class="right"
                   />
@@ -127,9 +123,7 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  >
-                    3
-                  </div>
+                  />
                   <span
                     class="right"
                   />
@@ -149,9 +143,7 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  >
-                    4
-                  </div>
+                  />
                   <span
                     class="right"
                   />
@@ -171,9 +163,7 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  >
-                    5
-                  </div>
+                  />
                   <span
                     class="right"
                   />
@@ -194,7 +184,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    6
+                    1
                   </div>
                   <span
                     class="right"
@@ -216,7 +206,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    7
+                    2
                   </div>
                   <span
                     class="right"
@@ -242,7 +232,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    8
+                    3
                   </div>
                   <span
                     class="right"
@@ -264,7 +254,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    9
+                    4
                   </div>
                   <span
                     class="right"
@@ -286,7 +276,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    10
+                    5
                   </div>
                   <span
                     class="right"
@@ -308,7 +298,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    11
+                    6
                   </div>
                   <span
                     class="right"
@@ -330,7 +320,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    12
+                    7
                   </div>
                   <span
                     class="right"
@@ -352,7 +342,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    13
+                    8
                   </div>
                   <span
                     class="right"
@@ -374,7 +364,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    14
+                    9
                   </div>
                   <span
                     class="right"
@@ -400,7 +390,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    15
+                    10
                   </div>
                   <span
                     class="right"
@@ -422,7 +412,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    16
+                    11
                   </div>
                   <span
                     class="right"
@@ -444,7 +434,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    17
+                    12
                   </div>
                   <span
                     class="right"
@@ -466,7 +456,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    18
+                    13
                   </div>
                   <span
                     class="right"
@@ -488,7 +478,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    19
+                    14
                   </div>
                   <span
                     class="right"
@@ -510,7 +500,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    20
+                    15
                   </div>
                   <span
                     class="right"
@@ -532,7 +522,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    21
+                    16
                   </div>
                   <span
                     class="right"
@@ -558,7 +548,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    22
+                    17
                   </div>
                   <span
                     class="right"
@@ -580,7 +570,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    23
+                    18
                   </div>
                   <span
                     class="right"
@@ -602,7 +592,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    24
+                    19
                   </div>
                   <span
                     class="right"
@@ -624,7 +614,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    25
+                    20
                   </div>
                   <span
                     class="right"
@@ -646,7 +636,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    26
+                    21
                   </div>
                   <span
                     class="right"
@@ -668,7 +658,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    27
+                    22
                   </div>
                   <span
                     class="right"
@@ -690,7 +680,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    28
+                    23
                   </div>
                   <span
                     class="right"
@@ -716,7 +706,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    29
+                    24
                   </div>
                   <span
                     class="right"
@@ -738,7 +728,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    30
+                    25
                   </div>
                   <span
                     class="right"
@@ -760,7 +750,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    31
+                    26
                   </div>
                   <span
                     class="right"
@@ -770,23 +760,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="single-month"
-        >
-          <div
-            class="month-title"
-          >
-            2017年11月
-          </div>
-          <div
-            class="date"
-          >
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -797,8 +770,10 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
-                  />
+                    class="date"
+                  >
+                    27
+                  </div>
                   <span
                     class="right"
                   />
@@ -818,7 +793,9 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  />
+                  >
+                    28
+                  </div>
                   <span
                     class="right"
                   />
@@ -838,7 +815,31 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
+                  >
+                    29
+                  </div>
+                  <span
+                    class="right"
                   />
+                </div>
+                <div
+                  class="info"
+                />
+              </div>
+              <div
+                class="cell "
+              >
+                <div
+                  class="date-wrapper"
+                >
+                  <span
+                    class="left"
+                  />
+                  <div
+                    class="date grey"
+                  >
+                    30
+                  </div>
                   <span
                     class="right"
                   />
@@ -847,6 +848,23 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="single-month"
+        >
+          <div
+            class="month-title"
+          >
+            2018年07月
+          </div>
+          <div
+            class="date"
+          >
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -857,7 +875,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     1
                   </div>
@@ -923,7 +941,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     4
                   </div>
@@ -935,10 +953,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -949,7 +963,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     5
                   </div>
@@ -993,7 +1007,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     7
                   </div>
@@ -1005,6 +1019,10 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -1015,7 +1033,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     8
                   </div>
@@ -1081,7 +1099,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     11
                   </div>
@@ -1093,10 +1111,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -1107,7 +1121,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     12
                   </div>
@@ -1151,7 +1165,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     14
                   </div>
@@ -1163,6 +1177,10 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -1173,7 +1191,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     15
                   </div>
@@ -1239,7 +1257,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     18
                   </div>
@@ -1251,10 +1269,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -1265,7 +1279,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     19
                   </div>
@@ -1309,7 +1323,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     21
                   </div>
@@ -1321,6 +1335,10 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -1331,7 +1349,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     22
                   </div>
@@ -1397,7 +1415,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     25
                   </div>
@@ -1409,10 +1427,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -1423,7 +1437,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     26
                   </div>
@@ -1467,7 +1481,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     28
                   </div>
@@ -1479,6 +1493,10 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -1489,7 +1507,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     29
                   </div>
@@ -1523,6 +1541,28 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+              <div
+                class="cell "
+              >
+                <div
+                  class="date-wrapper"
+                >
+                  <span
+                    class="left"
+                  />
+                  <div
+                    class="date"
+                  >
+                    31
+                  </div>
+                  <span
+                    class="right"
+                  />
+                </div>
+                <div
+                  class="info"
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -1532,7 +1572,7 @@ exports[`DatePicker renders correctly 1`] = `
           <div
             class="month-title"
           >
-            2017年12月
+            2018年08月
           </div>
           <div
             class="date"
@@ -1611,7 +1651,9 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  />
+                  >
+                    1
+                  </div>
                   <span
                     class="right"
                   />
@@ -1631,7 +1673,9 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  />
+                  >
+                    2
+                  </div>
                   <span
                     class="right"
                   />
@@ -1652,7 +1696,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    1
+                    3
                   </div>
                   <span
                     class="right"
@@ -1674,7 +1718,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    2
+                    4
                   </div>
                   <span
                     class="right"
@@ -1700,7 +1744,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    3
+                    5
                   </div>
                   <span
                     class="right"
@@ -1722,7 +1766,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    4
+                    6
                   </div>
                   <span
                     class="right"
@@ -1744,7 +1788,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    5
+                    7
                   </div>
                   <span
                     class="right"
@@ -1766,7 +1810,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    6
+                    8
                   </div>
                   <span
                     class="right"
@@ -1788,7 +1832,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    7
+                    9
                   </div>
                   <span
                     class="right"
@@ -1810,7 +1854,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    8
+                    10
                   </div>
                   <span
                     class="right"
@@ -1832,7 +1876,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    9
+                    11
                   </div>
                   <span
                     class="right"
@@ -1858,7 +1902,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    10
+                    12
                   </div>
                   <span
                     class="right"
@@ -1880,7 +1924,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    11
+                    13
                   </div>
                   <span
                     class="right"
@@ -1902,7 +1946,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    12
+                    14
                   </div>
                   <span
                     class="right"
@@ -1924,7 +1968,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    13
+                    15
                   </div>
                   <span
                     class="right"
@@ -1946,7 +1990,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    14
+                    16
                   </div>
                   <span
                     class="right"
@@ -1968,7 +2012,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    15
+                    17
                   </div>
                   <span
                     class="right"
@@ -1990,7 +2034,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    16
+                    18
                   </div>
                   <span
                     class="right"
@@ -2016,7 +2060,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    17
+                    19
                   </div>
                   <span
                     class="right"
@@ -2038,7 +2082,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    18
+                    20
                   </div>
                   <span
                     class="right"
@@ -2060,7 +2104,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    19
+                    21
                   </div>
                   <span
                     class="right"
@@ -2082,7 +2126,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    20
+                    22
                   </div>
                   <span
                     class="right"
@@ -2104,7 +2148,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    21
+                    23
                   </div>
                   <span
                     class="right"
@@ -2126,7 +2170,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    22
+                    24
                   </div>
                   <span
                     class="right"
@@ -2148,7 +2192,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    23
+                    25
                   </div>
                   <span
                     class="right"
@@ -2172,9 +2216,75 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date grey"
+                  >
+                    26
+                  </div>
+                  <span
+                    class="right"
+                  />
+                </div>
+                <div
+                  class="info"
+                />
+              </div>
+              <div
+                class="cell "
+              >
+                <div
+                  class="date-wrapper"
+                >
+                  <span
+                    class="left"
+                  />
+                  <div
+                    class="date"
+                  >
+                    27
+                  </div>
+                  <span
+                    class="right"
+                  />
+                </div>
+                <div
+                  class="info"
+                />
+              </div>
+              <div
+                class="cell "
+              >
+                <div
+                  class="date-wrapper"
+                >
+                  <span
+                    class="left"
+                  />
+                  <div
+                    class="date"
+                  >
+                    28
+                  </div>
+                  <span
+                    class="right"
+                  />
+                </div>
+                <div
+                  class="info"
+                />
+              </div>
+              <div
+                class="cell "
+              >
+                <div
+                  class="date-wrapper"
+                >
+                  <span
+                    class="left"
+                  />
+                  <div
+                    class="date"
                   >
-                    24
+                    29
                   </div>
                   <span
                     class="right"
@@ -2196,7 +2306,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    25
+                    30
                   </div>
                   <span
                     class="right"
@@ -2218,7 +2328,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    26
+                    31
                   </div>
                   <span
                     class="right"
@@ -2228,6 +2338,23 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="single-month"
+        >
+          <div
+            class="month-title"
+          >
+            2018年09月
+          </div>
+          <div
+            class="date"
+          >
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -2238,10 +2365,8 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
-                  >
-                    27
-                  </div>
+                    class="date grey"
+                  />
                   <span
                     class="right"
                   />
@@ -2261,9 +2386,7 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  >
-                    28
-                  </div>
+                  />
                   <span
                     class="right"
                   />
@@ -2283,9 +2406,7 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  >
-                    29
-                  </div>
+                  />
                   <span
                     class="right"
                   />
@@ -2304,10 +2425,8 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
-                  >
-                    30
-                  </div>
+                    class="date"
+                  />
                   <span
                     class="right"
                   />
@@ -2316,10 +2435,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -2330,10 +2445,8 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
-                  >
-                    31
-                  </div>
+                    class="date"
+                  />
                   <span
                     class="right"
                   />
@@ -2342,23 +2455,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-          </div>
-        </div>
-        <div
-          class="single-month"
-        >
-          <div
-            class="month-title"
-          >
-            2018年01月
-          </div>
-          <div
-            class="date"
-          >
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -2369,7 +2465,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   />
                   <span
                     class="right"
@@ -2389,7 +2485,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     1
                   </div>
@@ -2401,6 +2497,10 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -2411,7 +2511,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     2
                   </div>
@@ -2499,7 +2599,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     6
                   </div>
@@ -2511,10 +2611,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -2525,7 +2621,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     7
                   </div>
@@ -2547,7 +2643,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     8
                   </div>
@@ -2559,6 +2655,10 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -2569,7 +2669,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     9
                   </div>
@@ -2657,7 +2757,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     13
                   </div>
@@ -2669,10 +2769,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -2683,7 +2779,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     14
                   </div>
@@ -2705,7 +2801,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     15
                   </div>
@@ -2717,6 +2813,10 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -2727,7 +2827,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     16
                   </div>
@@ -2815,7 +2915,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     20
                   </div>
@@ -2827,10 +2927,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -2841,7 +2937,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     21
                   </div>
@@ -2863,7 +2959,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     22
                   </div>
@@ -2875,6 +2971,10 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -2885,7 +2985,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     23
                   </div>
@@ -2973,7 +3073,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     27
                   </div>
@@ -2985,10 +3085,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-            </div>
-            <div
-              class="row"
-            >
               <div
                 class="cell "
               >
@@ -2999,7 +3095,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date grey"
+                    class="date"
                   >
                     28
                   </div>
@@ -3021,7 +3117,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     29
                   </div>
@@ -3033,6 +3129,10 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
+            </div>
+            <div
+              class="row"
+            >
               <div
                 class="cell "
               >
@@ -3043,7 +3143,7 @@ exports[`DatePicker renders correctly 1`] = `
                     class="left"
                   />
                   <div
-                    class="date"
+                    class="date grey"
                   >
                     30
                   </div>
@@ -3055,28 +3155,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-              <div
-                class="cell "
-              >
-                <div
-                  class="date-wrapper"
-                >
-                  <span
-                    class="left"
-                  />
-                  <div
-                    class="date"
-                  >
-                    31
-                  </div>
-                  <span
-                    class="right"
-                  />
-                </div>
-                <div
-                  class="info"
-                />
-              </div>
             </div>
           </div>
         </div>
@@ -3086,7 +3164,7 @@ exports[`DatePicker renders correctly 1`] = `
           <div
             class="month-title"
           >
-            2018年02月
+            2018年10月
           </div>
           <div
             class="date"
@@ -3125,7 +3203,9 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  />
+                  >
+                    1
+                  </div>
                   <span
                     class="right"
                   />
@@ -3145,7 +3225,9 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  />
+                  >
+                    2
+                  </div>
                   <span
                     class="right"
                   />
@@ -3165,7 +3247,9 @@ exports[`DatePicker renders correctly 1`] = `
                   />
                   <div
                     class="date"
-                  />
+                  >
+                    3
+                  </div>
                   <span
                     class="right"
                   />
@@ -3186,7 +3270,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    1
+                    4
                   </div>
                   <span
                     class="right"
@@ -3208,7 +3292,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    2
+                    5
                   </div>
                   <span
                     class="right"
@@ -3230,7 +3314,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    3
+                    6
                   </div>
                   <span
                     class="right"
@@ -3256,7 +3340,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    4
+                    7
                   </div>
                   <span
                     class="right"
@@ -3278,7 +3362,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    5
+                    8
                   </div>
                   <span
                     class="right"
@@ -3300,7 +3384,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    6
+                    9
                   </div>
                   <span
                     class="right"
@@ -3322,7 +3406,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    7
+                    10
                   </div>
                   <span
                     class="right"
@@ -3344,7 +3428,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    8
+                    11
                   </div>
                   <span
                     class="right"
@@ -3366,7 +3450,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    9
+                    12
                   </div>
                   <span
                     class="right"
@@ -3388,7 +3472,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    10
+                    13
                   </div>
                   <span
                     class="right"
@@ -3414,7 +3498,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    11
+                    14
                   </div>
                   <span
                     class="right"
@@ -3436,7 +3520,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    12
+                    15
                   </div>
                   <span
                     class="right"
@@ -3458,7 +3542,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    13
+                    16
                   </div>
                   <span
                     class="right"
@@ -3480,7 +3564,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    14
+                    17
                   </div>
                   <span
                     class="right"
@@ -3502,7 +3586,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    15
+                    18
                   </div>
                   <span
                     class="right"
@@ -3524,7 +3608,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    16
+                    19
                   </div>
                   <span
                     class="right"
@@ -3546,7 +3630,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    17
+                    20
                   </div>
                   <span
                     class="right"
@@ -3572,7 +3656,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    18
+                    21
                   </div>
                   <span
                     class="right"
@@ -3594,7 +3678,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    19
+                    22
                   </div>
                   <span
                     class="right"
@@ -3616,7 +3700,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    20
+                    23
                   </div>
                   <span
                     class="right"
@@ -3638,7 +3722,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    21
+                    24
                   </div>
                   <span
                     class="right"
@@ -3660,7 +3744,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    22
+                    25
                   </div>
                   <span
                     class="right"
@@ -3682,7 +3766,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    23
+                    26
                   </div>
                   <span
                     class="right"
@@ -3704,7 +3788,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    24
+                    27
                   </div>
                   <span
                     class="right"
@@ -3730,7 +3814,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date grey"
                   >
-                    25
+                    28
                   </div>
                   <span
                     class="right"
@@ -3752,7 +3836,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    26
+                    29
                   </div>
                   <span
                     class="right"
@@ -3774,7 +3858,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    27
+                    30
                   </div>
                   <span
                     class="right"
@@ -3796,7 +3880,7 @@ exports[`DatePicker renders correctly 1`] = `
                   <div
                     class="date"
                   >
-                    28
+                    31
                   </div>
                   <span
                     class="right"
@@ -3815,7 +3899,7 @@ exports[`DatePicker renders correctly 1`] = `
           <div
             class="month-title"
           >
-            2018年03月
+            2018年11月
           </div>
           <div
             class="date"
@@ -4579,28 +4663,6 @@ exports[`DatePicker renders correctly 1`] = `
                   class="info"
                 />
               </div>
-              <div
-                class="cell "
-              >
-                <div
-                  class="date-wrapper"
-                >
-                  <span
-                    class="left"
-                  />
-                  <div
-                    class="date grey"
-                  >
-                    31
-                  </div>
-                  <span
-                    class="right"
-                  />
-                </div>
-                <div
-                  class="info"
-                />
-              </div>
             </div>
           </div>
         </div>