fix: calendar v-model not work

antdv-demo

@@ -1 +1 @@
-Subproject commit 0946782cced82b75cd9a75a80fa97814381e9d19
+Subproject commit fedb9ecff3abc0ef5d7f57cf5cee1f8352dd9d85

breakChange-2.x.md

@@ -113,3 +113,9 @@ customRender( text, record, index, column ); => customRender({ text, record, ind
 expandedRowRender(record, index, indent, expanded) => expandedRowRender({ record, index, indent, expanded })
 
 filterIcon(filtered, column) => filterIcon({ filtered, column })
+
+## calendar
+
+dateCellRender、dateFullCellRender、monthCellRender、monthFullCellRender
+
+function (date, today?) => function({current, today?})

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -3,27 +3,35 @@
 exports[`Calendar Calendar should support locale 1`] = `
 <div class=" ant-fullcalendar-fullscreen">
   <div class="ant-fullcalendar-header">
-    <div tabindex="0" class="ant-select ant-select-enabled ant-fullcalendar-year-select">
+    <!---->
-      <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
+    <div class="ant-fullcalendar-year-select ant-select ant-select-enabled" tabindex="0">
+      <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
         <div class="ant-select-selection__rendered">
-          <div title="2018年" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">2018年</div>
+          <!---->
-        </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+          <div class="ant-select-selection-selected-value" title="2018年" style="display: block; opacity: 1;">2018年</div>
+        </div>
+        <!----><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span class="anticon anticon-down ant-select-arrow-icon" role="img" aria-label="down"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
       </div>
     </div>
-    <div tabindex="0" class="ant-select ant-select-enabled ant-fullcalendar-month-select">
+    <!---->
-      <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
+    <div class="ant-fullcalendar-month-select ant-select ant-select-enabled" tabindex="0">
+      <div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single">
         <div class="ant-select-selection__rendered">
-          <div title="Oct" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Oct</div>
+          <!---->
-        </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+          <div class="ant-select-selection-selected-value" title="Oct" style="display: block; opacity: 1;">Oct</div>
+        </div>
+        <!----><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span class="anticon anticon-down ant-select-arrow-icon" role="img" aria-label="down"><svg class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896" focusable="false"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
       </div>
     </div>
     <div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="month"><span class="ant-radio-button-inner"></span></span><span>月</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="year"><span class="ant-radio-button-inner"></span></span><span>年</span></label></div>
   </div>
-  <div tabindex="0" class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen">
+  <div class="ant-fullcalendar ant-fullcalendar-full ant-fullcalendar-fullscreen" tabindex="0">
+    <!---->
     <div class="ant-fullcalendar-calendar-body">
-      <table cellspacing="0" role="grid" class="ant-fullcalendar-table">
+      <table class="ant-fullcalendar-table" cellspacing="0" role="grid">
         <thead>
           <tr role="row">
+            <!---->
             <th role="columnheader" title="Sun" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Su</span></th>
             <th role="columnheader" title="Mon" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Mo</span></th>
             <th role="columnheader" title="Tue" class="ant-fullcalendar-column-header"><span class="ant-fullcalendar-column-header-inner">Tu</span></th>
@@ -35,266 +43,356 @@ exports[`Calendar Calendar should support locale 1`] = `
         </thead>
         <tbody class="ant-fullcalendar-tbody">
           <tr role="row" class="">
+            <!---->
             <td role="gridcell" title="September 30, 2018" class="ant-fullcalendar-cell ant-fullcalendar-last-month-cell ant-fullcalendar-last-day-of-month">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">30</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 1, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">01</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 2, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">02</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 3, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">03</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 4, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">04</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 5, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">05</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 6, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">06</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
           </tr>
           <tr role="row" class="">
+            <!---->
             <td role="gridcell" title="October 7, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">07</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 8, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">08</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 9, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">09</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 10, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">10</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 11, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">11</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 12, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">12</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 13, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">13</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
           </tr>
           <tr role="row" class="ant-fullcalendar-current-week ant-fullcalendar-active-week">
+            <!---->
             <td role="gridcell" title="October 14, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">14</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 15, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">15</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 16, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">16</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 17, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">17</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 18, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">18</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 19, 2018" class="ant-fullcalendar-cell ant-fullcalendar-today ant-fullcalendar-selected-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">19</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 20, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">20</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
           </tr>
           <tr role="row" class="">
+            <!---->
             <td role="gridcell" title="October 21, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">21</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 22, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">22</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 23, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">23</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 24, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">24</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 25, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">25</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 26, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">26</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 27, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">27</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
           </tr>
           <tr role="row" class="">
+            <!---->
             <td role="gridcell" title="October 28, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">28</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 29, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">29</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 30, 2018" class="ant-fullcalendar-cell">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">30</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="October 31, 2018" class="ant-fullcalendar-cell ant-fullcalendar-last-day-of-month">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">31</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="November 1, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">01</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="November 2, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">02</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="November 3, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">03</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
           </tr>
           <tr role="row" class="">
+            <!---->
             <td role="gridcell" title="November 4, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">04</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="November 5, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">05</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="November 6, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">06</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="November 7, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">07</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="November 8, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">08</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="November 9, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">09</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
             <td role="gridcell" title="November 10, 2018" class="ant-fullcalendar-cell ant-fullcalendar-next-month-btn-day">
               <div class="ant-fullcalendar-date">
                 <div class="ant-fullcalendar-value">10</div>
-                <div class="ant-fullcalendar-content"></div>
+                <div class="ant-fullcalendar-content">
+                  <!---->
+                </div>
               </div>
             </td>
           </tr>

components/calendar/__tests__/index.test.js

@@ -12,7 +12,7 @@ function $$(className) {
 }
 describe('Calendar', () => {
   mountTest(Calendar);
-  beforeAll(() => {
+  beforeEach(() => {
     document.body.innerHTML = '';
   });
   it('Calendar should be selectable', async () => {
@@ -26,10 +26,7 @@ describe('Calendar', () => {
       { sync: false },
     );
     await asyncExpect(() => {
-      wrapper
+      wrapper.findAll('.ant-fullcalendar-cell')[0].trigger('click');
-        .findAll('.ant-fullcalendar-cell')
-        .at(0)
-        .trigger('click');
     });
     await asyncExpect(() => {
       expect(onSelect).toHaveBeenCalledWith(expect.anything());
@@ -56,14 +53,8 @@ describe('Calendar', () => {
       { sync: false },
     );
     await asyncExpect(() => {
-      wrapper
+      wrapper.findAll('[title="February 1, 2018"]')[0].trigger('click');
-        .findAll('[title="February 1, 2018"]')
+      wrapper.findAll('[title="February 2, 2018"]')[0].trigger('click');
-        .at(0)
-        .trigger('click');
-      wrapper
-        .findAll('[title="February 2, 2018"]')
-        .at(0)
-        .trigger('click');
       expect(onSelect.mock.calls.length).toBe(1);
     });
   });
@@ -86,10 +77,7 @@ describe('Calendar', () => {
       { sync: false },
     );
     await asyncExpect(() => {
-      wrapper
+      wrapper.findAll('[title="February 20, 2018"]')[0].trigger('click');
-        .findAll('[title="February 20, 2018"]')
-        .at(0)
-        .trigger('click');
       expect(wrapper.find('[title="February 20, 2018"]').classes()).toContain(
         'ant-fullcalendar-disabled-cell',
       );
@@ -116,32 +104,17 @@ describe('Calendar', () => {
       { sync: false },
     );
     await asyncExpect(() => {
-      expect(
+      expect(wrapper.findAll('[title="Jan"]')[0].classes()).toContain(
-        wrapper
+        'ant-fullcalendar-month-panel-cell-disabled',
-          .findAll('[title="Jan"]')
+      );
-          .at(0)
+      expect(wrapper.findAll('[title="Feb"]')[0].classes()).not.toContain(
-          .classes(),
+        'ant-fullcalendar-month-panel-cell-disabled',
-      ).toContain('ant-fullcalendar-month-panel-cell-disabled');
+      );
-      expect(
+      expect(wrapper.findAll('[title="Jun"]')[0].classes()).toContain(
-        wrapper
+        'ant-fullcalendar-month-panel-cell-disabled',
-          .findAll('[title="Feb"]')
+      );
-          .at(0)
+      wrapper.findAll('[title="Jan"]')[0].trigger('click');
-          .classes(),
+      wrapper.findAll('[title="Mar"]')[0].trigger('click');
-      ).not.toContain('ant-fullcalendar-month-panel-cell-disabled');
-      expect(
-        wrapper
-          .findAll('[title="Jun"]')
-          .at(0)
-          .classes(),
-      ).toContain('ant-fullcalendar-month-panel-cell-disabled');
-      wrapper
-        .findAll('[title="Jan"]')
-        .at(0)
-        .trigger('click');
-      wrapper
-        .findAll('[title="Mar"]')
-        .at(0)
-        .trigger('click');
       expect(onSelect.mock.calls.length).toBe(1);
     });
   });
@@ -186,13 +159,11 @@ describe('Calendar', () => {
     const monthMode = 'month';
     const yearMode = 'year';
     const wrapper = mount(Calendar, { sync: false });
-    await asyncExpect(() => {
+    await sleep(50);
-      expect(wrapper.vm.sMode).toEqual(monthMode);
+    expect(wrapper.vm.sMode).toEqual(monthMode);
-      wrapper.setProps({ mode: 'year' });
+    wrapper.setProps({ mode: 'year' });
-    });
+    await sleep(50);
-    await asyncExpect(() => {
+    expect(wrapper.vm.sMode).toEqual(yearMode);
-      expect(wrapper.vm.sMode).toEqual(yearMode);
-    });
   });
 
   it('Calendar should switch mode', async () => {
@@ -242,10 +213,7 @@ describe('Calendar', () => {
       },
       sync: false,
     });
-    wrapper
+    wrapper.findAll('.ant-fullcalendar-cell')[0].trigger('click');
-      .findAll('.ant-fullcalendar-cell')
-      .at(0)
-      .trigger('click');
 
     expect(onPanelChange).toHaveBeenCalled();
     expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1);
@@ -260,12 +228,14 @@ describe('Calendar', () => {
         onPanelChange,
       },
       sync: false,
+      attachTo: 'body',
     });
+    await sleep(300);
     expect(wrapper.vm.sMode).toBe('month');
     expect(wrapper.findAll('.ant-fullcalendar-table').length).toBe(1);
     expect(wrapper.findAll('.ant-fullcalendar-month-panel-table').length).toBe(0);
-    wrapper.findAll('.ant-radio-button-input[value="year"]').trigger('change');
+    await wrapper.findAll('.ant-radio-button-input[value="year"]')[0].trigger('change');
-    await sleep(50);
+    await sleep(300);
     expect(wrapper.findAll('.ant-fullcalendar-table').length).toBe(0);
     expect(wrapper.findAll('.ant-fullcalendar-month-panel-table').length).toBe(1);
     expect(onPanelChange).toHaveBeenCalled();
@@ -293,10 +263,7 @@ describe('Calendar', () => {
       },
     );
     await sleep(50);
-    wrapper
+    wrapper.findAll('.ant-fullcalendar-year-select')[0].trigger('click');
-      .findAll('.ant-fullcalendar-year-select')
-      .at(0)
-      .trigger('click');
     await sleep(50);
     $$('.ant-select-dropdown-menu-item')[0].click();
     await sleep(50);
@@ -353,15 +320,9 @@ describe('Calendar', () => {
       },
     );
     await sleep(50);
-    wrapper
+    wrapper.findAll('.ant-fullcalendar-month-select')[0].trigger('click');
-      .findAll('.ant-fullcalendar-month-select')
-      .at(0)
-      .trigger('click');
     await sleep(50);
-    wrapper
+    wrapper.findAll('.ant-select-dropdown-menu-item')[0].trigger('click');
-      .findAll('.ant-select-dropdown-menu-item')
-      .at(0)
-      .trigger('click');
     await sleep(50);
     expect(onValueChange).toHaveBeenCalledWith(value.month(10));
   });
@@ -381,10 +342,7 @@ describe('Calendar', () => {
         );
       },
     });
-    wrapper
+    wrapper.findAll('input')[1].trigger('change');
-      .findAll('input')
-      .at(1)
-      .trigger('change');
     expect(onTypeChange).toHaveBeenCalledWith('year');
   });
 });

components/calendar/index.jsx

@@ -111,10 +111,13 @@ const Calendar = {
         this.setState({ sValue: value });
       }
       if (way === 'select') {
+        const val = valueFormat ? momentToString(value, valueFormat) : value;
         if (prevValue && prevValue.month() !== value.month()) {
           this.triggerPanelChange(value, mode);
+        } else {
+          this.$emit('update:value', val);
         }
-        this.$emit('select', valueFormat ? momentToString(value, valueFormat) : value);
+        this.$emit('select', val);
       } else if (way === 'changePanel') {
         this.triggerPanelChange(value, mode);
       }

components/vc-select/SelectTrigger.jsx

@@ -90,7 +90,7 @@ export default {
     setDropdownWidth() {
       this.cancelRafInstance();
       this.rafInstance = raf(() => {
-        const width = findDOMNode(this).offsetWidth;
+        const width = findDOMNode(this)?.offsetWidth;
         if (width !== this.dropdownWidth) {
           this.setState({ dropdownWidth: width });
         }

examples/App.vue

@@ -4,7 +4,7 @@
   </div>
 </template>
 <script>
-import demo from '../antdv-demo/docs/affix/demo/index';
+import demo from '../antdv-demo/docs/calendar/demo/index';
 
 export default {
   components: {

examples/index.js

@@ -16,5 +16,6 @@ app
   .component('api', basic)
   .component('CN', basic)
   .component('US', basic)
+  .component('demo-container', basic)
   .use(antd)
   .mount('#app');