@king-design/vue 3.6.0 → 3.6.2-beta.0

package/components/datepicker/index.spec.js

@@ -11,7 +11,7 @@ import ClearableDemo from '~/components/datepicker/demos/clearable';
 import DatetimeDemo from '~/components/datepicker/demos/datetime';
 import RangeDemo from '~/components/datepicker/demos/range';
 import MultipleDemo from '~/components/datepicker/demos/multiple';
-import { mount, dispatchEvent, wait, getElement } from '../../test/utils';
+import { mount, unmount, dispatchEvent, wait, getElement } from '../../test/utils';
 import { Component } from 'intact-vue-next';
 import { Datepicker } from './';
 import FormatDemo from '~/components/datepicker/demos/format';
@@ -28,21 +28,21 @@ function clickConfirm(_x) {
 function _clickConfirm() {
   _clickConfirm = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee60(content) {
     var confirm;
-    return _regeneratorRuntime.wrap(function _callee60$(_context63) {
-      while (1) switch (_context63.prev = _context63.next) {
+    return _regeneratorRuntime.wrap(function _callee60$(_context64) {
+      while (1) switch (_context64.prev = _context64.next) {
         case 0:
-          _context63.next = 2;
+          _context64.next = 2;
           return wait();
         case 2:
           confirm = content.querySelector('.k-datepicker-footer .k-btn');
           confirm.click();
-          _context63.next = 6;
+          _context64.next = 6;
           return wait();
         case 6:
-          return _context63.abrupt("return", confirm);
+          return _context64.abrupt("return", confirm);
         case 7:
         case "end":
-          return _context63.stop();
+          return _context64.stop();
       }
     }, _callee60);
   }));
@@ -57,50 +57,59 @@ function getDateString(date) {
   return dayjs(now).date(date).format('YYYY-MM-DD');
 }
 describe('Datepicker', function () {
-  // afterEach(async () => {
-  // unmount();
-  // await wait(500);
-  // });
+  afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          unmount();
+          _context.next = 3;
+          return wait(500);
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
   describe('Pick', function () {
-    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
       var _mount, instance, element, input, content;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
             input = element.querySelector('.k-input');
             input.click();
-            _context.next = 5;
+            _context2.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
             content.querySelector('.k-calendar-item').click();
-            _context.next = 9;
+            _context2.next = 9;
             return wait();
           case 9:
             expect(instance.get('date')).to.be.string;
             checkDisplay(content, false);
           case 11:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee);
+      }, _callee2);
     })));
     describe('datetime', function () {
-      it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
         var _mount2, instance, element, input, content;
-        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
+        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
             case 0:
               _mount2 = mount(DatetimeDemo), instance = _mount2[0], element = _mount2[1];
               input = element.querySelector('.k-input');
               input.click();
-              _context2.next = 5;
+              _context3.next = 5;
               return wait();
             case 5:
               content = getElement('.k-datepicker-content'); // change to time panel
               content.querySelector('.k-calendar-item').click();
-              _context2.next = 9;
+              _context3.next = 9;
               return wait();
             case 9:
               dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
@@ -108,30 +117,30 @@ describe('Datepicker', function () {
               expect(instance.get('datetime1').split(' ')[1]).eql('15:00:00');
             case 12:
             case "end":
-              return _context2.stop();
+              return _context3.stop();
           }
-        }, _callee2);
+        }, _callee3);
       })));
-      it('skip select date and select time directly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      it('skip select date and select time directly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
         var _mount3, instance, element, input, content, show, _show, inputInner, confirm, activeHour;
-        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-          while (1) switch (_context4.prev = _context4.next) {
+        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+          while (1) switch (_context5.prev = _context5.next) {
             case 0:
               _show = function _show3() {
-                _show = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-                  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                    while (1) switch (_context3.prev = _context3.next) {
+                _show = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+                  return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+                    while (1) switch (_context4.prev = _context4.next) {
                       case 0:
                         input.click();
-                        _context3.next = 3;
+                        _context4.next = 3;
                         return wait();
                       case 3:
                         content = getElement('.k-datepicker-content');
                       case 4:
                       case "end":
-                        return _context3.stop();
+                        return _context4.stop();
                     }
-                  }, _callee3);
+                  }, _callee4);
                 }));
                 return _show.apply(this, arguments);
               };
@@ -140,11 +149,11 @@ describe('Datepicker', function () {
               };
               _mount3 = mount(DatetimeDemo), instance = _mount3[0], element = _mount3[1];
               input = element.querySelector('.k-input');
-              _context4.next = 6;
+              _context5.next = 6;
               return show();
             case 6:
               dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
-              _context4.next = 9;
+              _context5.next = 9;
               return wait();
             case 9:
               inputInner = input.querySelector('.k-input-inner');
@@ -152,58 +161,58 @@ describe('Datepicker', function () {
               expect(instance.get('datetime1')).eql(null);
               // hide to reset selected state
               document.body.click();
-              _context4.next = 15;
+              _context5.next = 15;
               return wait();
             case 15:
               expect(inputInner.getAttribute('placeholder')).eql("\u8BF7\u9009\u62E9\u65E5\u671F\u548C\u65F6\u95F4");
               expect(inputInner.value).eql('');
               expect(instance.get('datetime1')).eql(null);
               // show again
-              _context4.next = 20;
+              _context5.next = 20;
               return show();
             case 20:
               dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
-              _context4.next = 23;
+              _context5.next = 23;
               return wait();
             case 23:
               confirm = content.querySelector('.k-datepicker-footer .k-btn');
               confirm.click();
-              _context4.next = 27;
+              _context5.next = 27;
               return wait();
             case 27:
               expect(inputInner.value).eql(dateString + " 15:00:00");
               expect(instance.get('datetime1')).eql(dateString + " 15:00:00");
               checkDisplay(content, false);
               // change time
-              _context4.next = 32;
+              _context5.next = 32;
               return show();
             case 32:
               activeHour = content.querySelector('.k-scroll-select-item.k-active');
               dispatchEvent(activeHour.nextElementSibling, 'click');
-              _context4.next = 36;
+              _context5.next = 36;
               return wait();
             case 36:
               confirm.click();
-              _context4.next = 39;
+              _context5.next = 39;
               return wait();
             case 39:
               expect(instance.get('datetime1')).eql(dateString + " 16:00:00");
             case 40:
             case "end":
-              return _context4.stop();
+              return _context5.stop();
           }
-        }, _callee4);
+        }, _callee5);
       })));
     });
-    it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
       var _mount4, instance, element, _element$querySelecto, yearInput, content, yearDom, nextYearDom;
-      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
+      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
             _mount4 = mount(YearMonthDemo), instance = _mount4[0], element = _mount4[1];
             _element$querySelecto = element.querySelectorAll('.k-input'), yearInput = _element$querySelecto[0]; // year
             yearInput.click();
-            _context5.next = 5;
+            _context6.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
@@ -213,19 +222,19 @@ describe('Datepicker', function () {
             expect(instance.get('year') - 1).eql(year);
           case 10:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
-      }, _callee5);
+      }, _callee6);
     })));
-    it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
       var _mount5, instance, element, _element$querySelecto2, monthInput, content, monthDom, _instance$get$split, _year, _month;
-      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-        while (1) switch (_context6.prev = _context6.next) {
+      return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
           case 0:
             _mount5 = mount(YearMonthDemo), instance = _mount5[0], element = _mount5[1];
             _element$querySelecto2 = element.querySelectorAll('.k-input'), monthInput = _element$querySelecto2[1]; // month
             monthInput.click();
-            _context6.next = 5;
+            _context7.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
@@ -235,70 +244,49 @@ describe('Datepicker', function () {
             expect(+_year).eql(year);
             expect(+_month - 1).eql(month);
           case 11:
-          case "end":
-            return _context6.stop();
-        }
-      }, _callee6);
-    })));
-    it('week', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-      var _mount6, instance, element, inputs, weekInput, content, weekItem;
-      return _regeneratorRuntime.wrap(function _callee7$(_context7) {
-        while (1) switch (_context7.prev = _context7.next) {
-          case 0:
-            _mount6 = mount(YearMonthDemo), instance = _mount6[0], element = _mount6[1];
-            inputs = element.querySelectorAll('.k-input');
-            weekInput = inputs[2];
-            weekInput.click();
-            _context7.next = 6;
-            return wait();
-          case 6:
-            content = getElement('.k-datepicker-content');
-            weekItem = content.querySelector('.week-row:nth-child(1) .k-week-number');
-            weekItem.click();
-            expect(instance.get('week')).to.match(/^\d{4}-\d+周$/);
-          case 10:
           case "end":
             return _context7.stop();
         }
       }, _callee7);
     })));
-    it('quarter', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-      var _mount7, instance, element, inputs, QuarterInput, content, quarterItem;
-      return _regeneratorRuntime.wrap(function _callee8$(_context8) {
-        while (1) switch (_context8.prev = _context8.next) {
-          case 0:
-            _mount7 = mount(YearMonthDemo), instance = _mount7[0], element = _mount7[1];
-            inputs = element.querySelectorAll('.k-input');
-            QuarterInput = inputs[3];
-            QuarterInput.click();
-            _context8.next = 6;
-            return wait();
-          case 6:
-            content = getElement('.k-datepicker-content'); // 选择第一个季度  
-            quarterItem = content.querySelector('.k-calendar-item:nth-child(1)');
-            quarterItem.click();
-            // 验证输入框的值是否包含Q1
-            expect(instance.get('quarter')).to.include('Q1');
-          case 10:
-          case "end":
-            return _context8.stop();
-        }
-      }, _callee8);
-    })));
+    // it('week', async () => {  
+    // const [instance, element] = mount(YearMonthDemo);   
+    // const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
+    // const weekInput = inputs[2];  
+    // weekInput.click();  
+    // await wait();
+    // const content = getElement('.k-datepicker-content')!; 
+    // const weekItem = content.querySelector('.week-row:nth-child(1) .k-week-number') as HTMLElement;  
+    // weekItem.click();  
+    // expect(instance.get<string>('week')).to.match(/^\d{4}-\d+周$/)
+    // });
+    // it('quarter', async () => {  
+    // const [instance, element] = mount(YearMonthDemo);   
+    // const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
+    // const QuarterInput = inputs[3];  
+    // QuarterInput.click();  
+    // await wait();  
+    // const content = getElement('.k-datepicker-content')!;  
+    // // 选择第一个季度  
+    // const quarterItem = content.querySelector('.k-calendar-item:nth-child(1)') as HTMLElement;  
+    // quarterItem.click();  
+    // // 验证输入框的值是否包含Q1
+    // expect(instance.get<string>('quarter')).to.include('Q1')  
+    // }); 
   });
-  describe('Panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
-    return _regeneratorRuntime.wrap(function _callee13$(_context13) {
-      while (1) switch (_context13.prev = _context13.next) {
+  describe('Panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    return _regeneratorRuntime.wrap(function _callee12$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
         case 0:
-          it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-            var _mount8, instance, element, input, content, _Array$from, prevYear, prevMonth, _Array$from3, nextMonth, nextYear, curDate, _Array$from4, yearDom, monthDom, curDate1, curMonth;
-            return _regeneratorRuntime.wrap(function _callee9$(_context9) {
-              while (1) switch (_context9.prev = _context9.next) {
+          it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+            var _mount6, instance, element, input, content, _Array$from, prevYear, prevMonth, _Array$from3, nextMonth, nextYear, curDate, _Array$from4, yearDom, monthDom, curDate1, curMonth;
+            return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+              while (1) switch (_context8.prev = _context8.next) {
                 case 0:
-                  _mount8 = mount(BasicDemo), instance = _mount8[0], element = _mount8[1];
+                  _mount6 = mount(BasicDemo), instance = _mount6[0], element = _mount6[1];
                   input = element.querySelector('.k-input');
                   input.click();
-                  _context9.next = 5;
+                  _context8.next = 5;
                   return wait();
                 case 5:
                   content = getElement('.k-datepicker-content');
@@ -313,7 +301,7 @@ describe('Datepicker', function () {
                   dispatchEvent(nextMonth, 'click');
                   // click next year once
                   dispatchEvent(nextYear, 'click');
-                  _context9.next = 16;
+                  _context8.next = 16;
                   return wait();
                 case 16:
                   // select the middle date
@@ -325,21 +313,21 @@ describe('Datepicker', function () {
                   expect(curDate.getMonth()).be.eql(month);
                   // change year and month in year/month panel
                   input.click();
-                  _context9.next = 25;
+                  _context8.next = 25;
                   return wait();
                 case 25:
                   content = getElement('.k-datepicker-content');
                   _Array$from4 = _Array$from2(content.querySelectorAll('.k-month-value')), yearDom = _Array$from4[0], monthDom = _Array$from4[1];
                   yearDom.click();
-                  _context9.next = 30;
+                  _context8.next = 30;
                   return wait();
                 case 30:
                   content.querySelector('.k-today').click();
-                  _context9.next = 33;
+                  _context8.next = 33;
                   return wait();
                 case 33:
                   content.querySelector('.k-today').click();
-                  _context9.next = 36;
+                  _context8.next = 36;
                   return wait();
                 case 36:
                   // select the middle date
@@ -350,19 +338,19 @@ describe('Datepicker', function () {
                   expect(curDate1.getFullYear()).be.eql(year);
                 case 41:
                 case "end":
-                  return _context9.stop();
+                  return _context8.stop();
               }
-            }, _callee9);
+            }, _callee8);
           })));
-          it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-            var _mount9, instance, element, select, content, _content$querySelecto, panel1, panel2, _panel1$querySelector, nextMonth, nextYear, _content$querySelecto2, monthValues1, monthValues2, monthStart, yearStart, monthEnd, yearEnd, _panel2$querySelector, prevYear, firstDecadeStart, secondDecadeStart;
-            return _regeneratorRuntime.wrap(function _callee10$(_context10) {
-              while (1) switch (_context10.prev = _context10.next) {
+          it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+            var _mount7, instance, element, select, content, _content$querySelecto, panel1, panel2, _panel1$querySelector, nextMonth, nextYear, _content$querySelecto2, monthValues1, monthValues2, monthStart, yearStart, monthEnd, yearEnd, _panel2$querySelector, prevYear, firstDecadeStart, secondDecadeStart;
+            return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+              while (1) switch (_context9.prev = _context9.next) {
                 case 0:
-                  _mount9 = mount(RangeDemo), instance = _mount9[0], element = _mount9[1];
+                  _mount7 = mount(RangeDemo), instance = _mount7[0], element = _mount7[1];
                   select = element.querySelector('.k-datepicker');
                   select.click();
-                  _context10.next = 5;
+                  _context9.next = 5;
                   return wait();
                 case 5:
                   content = getElement('.k-datepicker-content');
@@ -374,20 +362,20 @@ describe('Datepicker', function () {
                   yearStart = year + Math.floor((month + 1) / 12);
                   monthEnd = (month + 2) % 12 + 1;
                   yearEnd = year + Math.floor((month + 2) / 12);
-                  _context10.next = 16;
+                  _context9.next = 16;
                   return wait();
                 case 16:
                   expect(monthValues1.textContent).to.eql(yearStart + "\u5E74" + monthStart + "\u6708");
                   expect(monthValues2.textContent).to.eql(yearEnd + "\u5E74" + monthEnd + "\u6708");
                   nextYear.click();
-                  _context10.next = 21;
+                  _context9.next = 21;
                   return wait();
                 case 21:
                   expect(monthValues1.textContent).to.eql(yearStart + 1 + "\u5E74" + monthStart + "\u6708");
                   expect(monthValues2.textContent).to.eql(yearEnd + 1 + "\u5E74" + monthEnd + "\u6708");
                   _panel2$querySelector = panel2.querySelectorAll('.k-prev'), prevYear = _panel2$querySelector[0];
                   prevYear.click();
-                  _context10.next = 27;
+                  _context9.next = 27;
                   return wait();
                 case 27:
                   expect(monthValues1.textContent).to.eql(yearStart + "\u5E74" + monthStart + "\u6708");
@@ -395,7 +383,7 @@ describe('Datepicker', function () {
                   // year panel
                   dispatchEvent(monthValues1.firstElementChild, 'click');
                   dispatchEvent(monthValues2.firstElementChild, 'click');
-                  _context10.next = 33;
+                  _context9.next = 33;
                   return wait();
                 case 33:
                   firstDecadeStart = Math.floor(yearStart / 10) * 10;
@@ -403,26 +391,26 @@ describe('Datepicker', function () {
                   expect(monthValues1.textContent).to.eql(firstDecadeStart + "\u5E74 - " + (firstDecadeStart + 9) + "\u5E74");
                   expect(monthValues1.textContent).to.eql(secondDecadeStart + "\u5E74 - " + (secondDecadeStart + 9) + "\u5E74");
                   nextYear.click();
-                  _context10.next = 40;
+                  _context9.next = 40;
                   return wait();
                 case 40:
                   expect(monthValues1.textContent).to.eql(firstDecadeStart + 10 + "\u5E74 - " + (secondDecadeStart + 19) + "\u5E74");
                   expect(monthValues1.textContent).to.eql(secondDecadeStart + 10 + "\u5E74 - " + (secondDecadeStart + 19) + "\u5E74");
                 case 42:
                 case "end":
-                  return _context10.stop();
+                  return _context9.stop();
               }
-            }, _callee10);
+            }, _callee9);
           })));
-          it('range year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
-            var _mount10, instance, element, _element$querySelecto3, select, content, _content$querySelecto3, panel1, panel2, _panel1$querySelector2, next, _panel2$querySelector2, prev, _content$querySelecto4, label1, label2;
-            return _regeneratorRuntime.wrap(function _callee11$(_context11) {
-              while (1) switch (_context11.prev = _context11.next) {
+          it('range year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+            var _mount8, instance, element, _element$querySelecto3, select, content, _content$querySelecto3, panel1, panel2, _panel1$querySelector2, next, _panel2$querySelector2, prev, _content$querySelecto4, label1, label2;
+            return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+              while (1) switch (_context10.prev = _context10.next) {
                 case 0:
-                  _mount10 = mount(RangeDemo), instance = _mount10[0], element = _mount10[1];
+                  _mount8 = mount(RangeDemo), instance = _mount8[0], element = _mount8[1];
                   _element$querySelecto3 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto3[2];
                   select.click();
-                  _context11.next = 5;
+                  _context10.next = 5;
                   return wait();
                 case 5:
                   content = getElement('.k-datepicker-content');
@@ -433,32 +421,32 @@ describe('Datepicker', function () {
                   expect(label1.textContent).to.eql(startYear + "\u5E74 - " + (startYear + 9) + "\u5E74");
                   expect(label2.textContent).to.eql(startYear + 10 + "\u5E74 - " + (startYear + 19) + "\u5E74");
                   next.click();
-                  _context11.next = 15;
+                  _context10.next = 15;
                   return wait();
                 case 15:
                   expect(label1.textContent).to.eql(startYear + 10 + "\u5E74 - " + (startYear + 19) + "\u5E74");
                   expect(label2.textContent).to.eql(startYear + 20 + "\u5E74 - " + (startYear + 29) + "\u5E74");
                   prev.click();
-                  _context11.next = 20;
+                  _context10.next = 20;
                   return wait();
                 case 20:
                   expect(label1.textContent).to.eql(startYear + "\u5E74 - " + (startYear + 9) + "\u5E74");
                   expect(label2.textContent).to.eql(startYear + 10 + "\u5E74 - " + (startYear + 19) + "\u5E74");
                 case 22:
                 case "end":
-                  return _context11.stop();
+                  return _context10.stop();
               }
-            }, _callee11);
+            }, _callee10);
           })));
-          it('range month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
-            var _mount11, instance, element, _element$querySelecto4, select, content, _content$querySelecto5, panel1, panel2, _panel1$querySelector3, next, _panel2$querySelector3, prev, _content$querySelecto6, label1, label2;
-            return _regeneratorRuntime.wrap(function _callee12$(_context12) {
-              while (1) switch (_context12.prev = _context12.next) {
+          it('range month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+            var _mount9, instance, element, _element$querySelecto4, select, content, _content$querySelecto5, panel1, panel2, _panel1$querySelector3, next, _panel2$querySelector3, prev, _content$querySelecto6, label1, label2;
+            return _regeneratorRuntime.wrap(function _callee11$(_context11) {
+              while (1) switch (_context11.prev = _context11.next) {
                 case 0:
-                  _mount11 = mount(RangeDemo), instance = _mount11[0], element = _mount11[1];
+                  _mount9 = mount(RangeDemo), instance = _mount9[0], element = _mount9[1];
                   _element$querySelecto4 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto4[3];
                   select.click();
-                  _context12.next = 5;
+                  _context11.next = 5;
                   return wait();
                 case 5:
                   content = getElement('.k-datepicker-content');
@@ -469,67 +457,67 @@ describe('Datepicker', function () {
                   expect(label1.textContent).to.eql(year + "\u5E74" + (month + 1) + "\u6708");
                   expect(label2.textContent).to.eql(year + 1 + "\u5E74" + (month + 1) + "\u6708");
                   next.click();
-                  _context12.next = 15;
+                  _context11.next = 15;
                   return wait();
                 case 15:
                   expect(label1.textContent).to.eql(year + 1 + "\u5E74" + (month + 1) + "\u6708");
                   expect(label2.textContent).to.eql(year + 2 + "\u5E74" + (month + 1) + "\u6708");
                   prev.click();
-                  _context12.next = 20;
+                  _context11.next = 20;
                   return wait();
                 case 20:
                   expect(label1.textContent).to.eql(year + "\u5E74" + (month + 1) + "\u6708");
                   expect(label2.textContent).to.eql(year + 1 + "\u5E74" + (month + 1) + "\u6708");
                 case 22:
                 case "end":
-                  return _context12.stop();
+                  return _context11.stop();
               }
-            }, _callee12);
+            }, _callee11);
           })));
         case 4:
         case "end":
-          return _context13.stop();
+          return _context12.stop();
       }
-    }, _callee13);
+    }, _callee12);
   })));
   describe('Clear', function () {
-    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
-      var _mount12, instance, element;
-      return _regeneratorRuntime.wrap(function _callee14$(_context14) {
-        while (1) switch (_context14.prev = _context14.next) {
+    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+      var _mount10, instance, element;
+      return _regeneratorRuntime.wrap(function _callee13$(_context13) {
+        while (1) switch (_context13.prev = _context13.next) {
           case 0:
-            _mount12 = mount(ClearableDemo), instance = _mount12[0], element = _mount12[1];
+            _mount10 = mount(ClearableDemo), instance = _mount10[0], element = _mount10[1];
             instance.set('date', '2018-03-04');
-            _context14.next = 4;
+            _context13.next = 4;
             return wait();
           case 4:
             dispatchEvent(element.querySelector('.k-select-clear'), 'click');
             expect(instance.get('date')).be.eql(null);
           case 6:
           case "end":
-            return _context14.stop();
+            return _context13.stop();
         }
-      }, _callee14);
+      }, _callee13);
     })));
-    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
-      var _mount13, instance, element, input, content;
-      return _regeneratorRuntime.wrap(function _callee15$(_context15) {
-        while (1) switch (_context15.prev = _context15.next) {
+    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+      var _mount11, instance, element, input, content;
+      return _regeneratorRuntime.wrap(function _callee14$(_context14) {
+        while (1) switch (_context14.prev = _context14.next) {
           case 0:
-            _mount13 = mount(DatetimeDemo), instance = _mount13[0], element = _mount13[1];
+            _mount11 = mount(DatetimeDemo), instance = _mount11[0], element = _mount11[1];
             input = element.querySelector('.k-input');
             input.click();
-            _context15.next = 5;
+            _context14.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content'); // change to time panel
             content.querySelector('.k-calendar-item').click();
-            _context15.next = 9;
+            _context14.next = 9;
             return wait();
           case 9:
             content.querySelector('.k-datepicker-footer .k-btn').click();
             // clear the value
-            _context15.next = 12;
+            _context14.next = 12;
             return wait();
           case 12:
             expect(instance.get('datetime1')).to.be.string;
@@ -537,7 +525,7 @@ describe('Datepicker', function () {
             expect(instance.get('datetime1')).be.eql(null);
             // set value to empty string should clear datetime
             input.click();
-            _context15.next = 18;
+            _context14.next = 18;
             return wait();
           case 18:
             content.querySelector('.k-calendar-item').click();
@@ -545,21 +533,21 @@ describe('Datepicker', function () {
             expect(instance.get('datetime1')).to.eql('');
           case 21:
           case "end":
-            return _context15.stop();
+            return _context14.stop();
         }
-      }, _callee15);
+      }, _callee14);
     })));
   });
   describe('Multiple', function () {
-    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
-      var _mount14, instance, element, select, content, items, close;
-      return _regeneratorRuntime.wrap(function _callee16$(_context16) {
-        while (1) switch (_context16.prev = _context16.next) {
+    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+      var _mount12, instance, element, select, content, items, close;
+      return _regeneratorRuntime.wrap(function _callee15$(_context15) {
+        while (1) switch (_context15.prev = _context15.next) {
           case 0:
-            _mount14 = mount(MultipleDemo), instance = _mount14[0], element = _mount14[1];
+            _mount12 = mount(MultipleDemo), instance = _mount12[0], element = _mount12[1];
             select = element.querySelector('.k-datepicker');
             dispatchEvent(select, 'click');
-            _context16.next = 5;
+            _context15.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
@@ -569,19 +557,19 @@ describe('Datepicker', function () {
             expect(instance.get('date')).have.lengthOf(2);
             dispatchEvent(items[18], 'click');
             expect(instance.get('date')).have.lengthOf(1);
-            _context16.next = 14;
+            _context15.next = 14;
             return wait();
           case 14:
             // remove specified item
             close = element.querySelector('.k-tag-close');
             close.click();
             expect(instance.get('date')).have.lengthOf(0);
-            _context16.next = 19;
+            _context15.next = 19;
             return wait();
           case 19:
             dispatchEvent(items[17], 'click');
             expect(instance.get('date')).have.lengthOf(1);
-            _context16.next = 23;
+            _context15.next = 23;
             return wait();
           case 23:
             // clear
@@ -589,173 +577,173 @@ describe('Datepicker', function () {
             expect(instance.get('date')).have.lengthOf(0);
           case 25:
           case "end":
-            return _context16.stop();
+            return _context15.stop();
         }
-      }, _callee16);
+      }, _callee15);
     })));
-    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
-      var _mount15, instance, element, _element$querySelecto5, select, content, activeHour, confirm;
-      return _regeneratorRuntime.wrap(function _callee17$(_context17) {
-        while (1) switch (_context17.prev = _context17.next) {
+    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+      var _mount13, instance, element, _element$querySelecto5, select, content, activeHour, confirm;
+      return _regeneratorRuntime.wrap(function _callee16$(_context16) {
+        while (1) switch (_context16.prev = _context16.next) {
           case 0:
-            _mount15 = mount(MultipleDemo), instance = _mount15[0], element = _mount15[1];
+            _mount13 = mount(MultipleDemo), instance = _mount13[0], element = _mount13[1];
             _element$querySelecto5 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto5[1];
             dispatchEvent(select, 'click');
-            _context17.next = 5;
+            _context16.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
-            _context17.next = 9;
+            _context16.next = 9;
             return wait();
           case 9:
             dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
-            _context17.next = 12;
+            _context16.next = 12;
             return wait();
           case 12:
             expect(instance.get('datetime')).have.lengthOf(1);
             // select the same datetime
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
-            _context17.next = 16;
+            _context16.next = 16;
             return wait();
           case 16:
             dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
-            _context17.next = 19;
+            _context16.next = 19;
             return wait();
           case 19:
             expect(instance.get('datetime')).have.lengthOf(1);
             // select different time with the same date
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
-            _context17.next = 23;
+            _context16.next = 23;
             return wait();
           case 23:
             dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
-            _context17.next = 26;
+            _context16.next = 26;
             return wait();
           case 26:
             dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
-            _context17.next = 29;
+            _context16.next = 29;
             return wait();
           case 29:
             expect(instance.get('datetime')).have.lengthOf(2);
             // select time directly
             activeHour = content.querySelector('.k-scroll-select-item.k-active');
             dispatchEvent(activeHour.nextElementSibling, 'click');
-            _context17.next = 34;
+            _context16.next = 34;
             return wait();
           case 34:
-            _context17.next = 36;
+            _context16.next = 36;
             return clickConfirm(content);
           case 36:
-            confirm = _context17.sent;
+            confirm = _context16.sent;
             expect(instance.get('datetime')).have.lengthOf(3);
             // select time firstly, then select date should only add one value
             dispatchEvent(activeHour.nextElementSibling.nextElementSibling, 'click');
-            _context17.next = 41;
+            _context16.next = 41;
             return wait();
           case 41:
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(19)'), 'click');
-            _context17.next = 44;
+            _context16.next = 44;
             return wait();
           case 44:
             confirm.click();
-            _context17.next = 47;
+            _context16.next = 47;
             return wait();
           case 47:
             expect(instance.get('datetime')).have.lengthOf(4);
           case 48:
           case "end":
-            return _context17.stop();
+            return _context16.stop();
         }
-      }, _callee17);
+      }, _callee16);
     })));
-    it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
-      var _mount16, instance, element, _element$querySelecto6, select, content;
-      return _regeneratorRuntime.wrap(function _callee18$(_context18) {
-        while (1) switch (_context18.prev = _context18.next) {
+    it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+      var _mount14, instance, element, _element$querySelecto6, select, content;
+      return _regeneratorRuntime.wrap(function _callee17$(_context17) {
+        while (1) switch (_context17.prev = _context17.next) {
           case 0:
-            _mount16 = mount(MultipleDemo), instance = _mount16[0], element = _mount16[1];
+            _mount14 = mount(MultipleDemo), instance = _mount14[0], element = _mount14[1];
             _element$querySelecto6 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto6[2];
             dispatchEvent(select, 'click');
-            _context18.next = 5;
+            _context17.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context18.next = 9;
+            _context17.next = 9;
             return wait();
           case 9:
             expect(instance.get('year')).have.lengthOf(1);
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(7)'), 'click');
-            _context18.next = 13;
+            _context17.next = 13;
             return wait();
           case 13:
             expect(instance.get('year')).have.lengthOf(2);
             instance.set('year', []);
-            _context18.next = 17;
+            _context17.next = 17;
             return wait();
           case 17:
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context18.next = 20;
+            _context17.next = 20;
             return wait();
           case 20:
             expect(instance.get('year')).have.lengthOf(1);
           case 21:
           case "end":
-            return _context18.stop();
+            return _context17.stop();
         }
-      }, _callee18);
+      }, _callee17);
     })));
-    it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
-      var _mount17, instance, element, _element$querySelecto7, select, content;
-      return _regeneratorRuntime.wrap(function _callee19$(_context19) {
-        while (1) switch (_context19.prev = _context19.next) {
+    it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+      var _mount15, instance, element, _element$querySelecto7, select, content;
+      return _regeneratorRuntime.wrap(function _callee18$(_context18) {
+        while (1) switch (_context18.prev = _context18.next) {
           case 0:
-            _mount17 = mount(MultipleDemo), instance = _mount17[0], element = _mount17[1];
+            _mount15 = mount(MultipleDemo), instance = _mount15[0], element = _mount15[1];
             _element$querySelecto7 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto7[3];
             dispatchEvent(select, 'click');
-            _context19.next = 5;
+            _context18.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context19.next = 9;
+            _context18.next = 9;
             return wait();
           case 9:
             expect(instance.get('month')).have.lengthOf(1);
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(7)'), 'click');
-            _context19.next = 13;
+            _context18.next = 13;
             return wait();
           case 13:
             expect(instance.get('month')).have.lengthOf(2);
             instance.set('month', []);
-            _context19.next = 17;
+            _context18.next = 17;
             return wait();
           case 17:
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context19.next = 20;
+            _context18.next = 20;
             return wait();
           case 20:
             expect(instance.get('month')).have.lengthOf(1);
           case 21:
           case "end":
-            return _context19.stop();
+            return _context18.stop();
         }
-      }, _callee19);
+      }, _callee18);
     })));
-    describe('date range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
-      return _regeneratorRuntime.wrap(function _callee22$(_context22) {
-        while (1) switch (_context22.prev = _context22.next) {
+    describe('date range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+      return _regeneratorRuntime.wrap(function _callee21$(_context21) {
+        while (1) switch (_context21.prev = _context21.next) {
           case 0:
-            it('date range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
-              var _mount18, instance, element, _element$querySelecto8, select, content, _content$querySelecto7, calendar1, calendar2, first, second, value1, third, fourth, value2;
-              return _regeneratorRuntime.wrap(function _callee20$(_context20) {
-                while (1) switch (_context20.prev = _context20.next) {
+            it('date range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+              var _mount16, instance, element, _element$querySelecto8, select, content, _content$querySelecto7, calendar1, calendar2, first, second, value1, third, fourth, value2;
+              return _regeneratorRuntime.wrap(function _callee19$(_context19) {
+                while (1) switch (_context19.prev = _context19.next) {
                   case 0:
-                    _mount18 = mount(MultipleDemo), instance = _mount18[0], element = _mount18[1];
+                    _mount16 = mount(MultipleDemo), instance = _mount16[0], element = _mount16[1];
                     _element$querySelecto8 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto8[4];
                     dispatchEvent(select, 'click');
-                    _context20.next = 5;
+                    _context19.next = 5;
                     return wait();
                   case 5:
                     content = getElement('.k-datepicker-content');
@@ -764,7 +752,7 @@ describe('Datepicker', function () {
                     second = first.nextElementSibling;
                     first.click();
                     second.click();
-                    _context20.next = 13;
+                    _context19.next = 13;
                     return wait();
                   case 13:
                     value1 = ["" + getDateString(1), "" + getDateString(2)];
@@ -773,43 +761,43 @@ describe('Datepicker', function () {
                     fourth = third.nextElementSibling;
                     third.click();
                     fourth.click();
-                    _context20.next = 21;
+                    _context19.next = 21;
                     return wait();
                   case 21:
                     value2 = ["" + getDateString(3), "" + getDateString(4)];
                     expect(instance.get('dateRange')).eql([value1, value2]);
                     first.click();
                     second.click();
-                    _context20.next = 27;
+                    _context19.next = 27;
                     return wait();
                   case 27:
                     expect(instance.get('dateRange')).eql([value2]);
                     instance.set('dateRange', []);
-                    _context20.next = 31;
+                    _context19.next = 31;
                     return wait();
                   case 31:
                     first.click();
                     second.click();
-                    _context20.next = 35;
+                    _context19.next = 35;
                     return wait();
                   case 35:
                     expect(instance.get('dateRange')).eql([value1]);
                   case 36:
                   case "end":
-                    return _context20.stop();
+                    return _context19.stop();
                 }
-              }, _callee20);
+              }, _callee19);
             })));
-            it('hover status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
-              var _mount19, instance, element, _element$querySelecto9, select, content, _content$querySelecto8, calendar1, calendar2, first, second;
-              return _regeneratorRuntime.wrap(function _callee21$(_context21) {
-                while (1) switch (_context21.prev = _context21.next) {
+            it('hover status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+              var _mount17, instance, element, _element$querySelecto9, select, content, _content$querySelecto8, calendar1, calendar2, first, second;
+              return _regeneratorRuntime.wrap(function _callee20$(_context20) {
+                while (1) switch (_context20.prev = _context20.next) {
                   case 0:
-                    _mount19 = mount(MultipleDemo), instance = _mount19[0], element = _mount19[1];
+                    _mount17 = mount(MultipleDemo), instance = _mount17[0], element = _mount17[1];
                     instance.set('dateRange', [['2025-07-11', '2025-07-15']]);
                     _element$querySelecto9 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto9[4];
                     dispatchEvent(select, 'click');
-                    _context21.next = 6;
+                    _context20.next = 6;
                     return wait();
                   case 6:
                     content = getElement('.k-datepicker-content');
@@ -817,35 +805,35 @@ describe('Datepicker', function () {
                     first = calendar1.querySelector('.k-calendar-item:not(.k-exceed)');
                     second = first.nextElementSibling;
                     dispatchEvent(first, 'mouseenter');
-                    _context21.next = 13;
+                    _context20.next = 13;
                     return wait();
                   case 13:
                     expect(second.classList.contains('k-in-range')).eql(false);
                   case 14:
                   case "end":
-                    return _context21.stop();
+                    return _context20.stop();
                 }
-              }, _callee21);
+              }, _callee20);
             })));
           case 2:
           case "end":
-            return _context22.stop();
+            return _context21.stop();
         }
-      }, _callee22);
+      }, _callee21);
     })));
-    describe('datetime range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
-      return _regeneratorRuntime.wrap(function _callee25$(_context25) {
-        while (1) switch (_context25.prev = _context25.next) {
+    describe('datetime range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+      return _regeneratorRuntime.wrap(function _callee24$(_context24) {
+        while (1) switch (_context24.prev = _context24.next) {
           case 0:
-            it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
-              var _mount20, instance, element, _element$querySelecto10, select, content, calendar1, first, second, inputInner, value1, third, fourth, value2, confirm;
-              return _regeneratorRuntime.wrap(function _callee23$(_context23) {
-                while (1) switch (_context23.prev = _context23.next) {
+            it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+              var _mount18, instance, element, _element$querySelecto10, select, content, calendar1, first, second, inputInner, value1, third, fourth, value2, confirm;
+              return _regeneratorRuntime.wrap(function _callee22$(_context22) {
+                while (1) switch (_context22.prev = _context22.next) {
                   case 0:
-                    _mount20 = mount(MultipleDemo), instance = _mount20[0], element = _mount20[1];
+                    _mount18 = mount(MultipleDemo), instance = _mount18[0], element = _mount18[1];
                     _element$querySelecto10 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto10[5];
                     dispatchEvent(select, 'click');
-                    _context23.next = 5;
+                    _context22.next = 5;
                     return wait();
                   case 5:
                     content = getElement('.k-datepicker-content');
@@ -854,16 +842,16 @@ describe('Datepicker', function () {
                     second = first.nextElementSibling;
                     inputInner = select.querySelector('.k-input-inner');
                     first.click();
-                    _context23.next = 13;
+                    _context22.next = 13;
                     return clickConfirm(content);
                   case 13:
                     expect(inputInner.value).eql(getDateString(1) + " 00:00:00 ~");
                     second.click();
-                    _context23.next = 17;
+                    _context22.next = 17;
                     return wait();
                   case 17:
                     expect(inputInner.value).eql(getDateString(1) + " 00:00:00 ~ " + getDateString(2) + " 00:00:00");
-                    _context23.next = 20;
+                    _context22.next = 20;
                     return clickConfirm(content);
                   case 20:
                     value1 = [getDateString(1) + " 00:00:00", getDateString(2) + " 00:00:00"];
@@ -871,92 +859,92 @@ describe('Datepicker', function () {
                     third = second.nextElementSibling;
                     fourth = third.nextElementSibling;
                     third.click();
-                    _context23.next = 27;
+                    _context22.next = 27;
                     return clickConfirm(content);
                   case 27:
                     fourth.click();
-                    _context23.next = 30;
+                    _context22.next = 30;
                     return clickConfirm(content);
                   case 30:
                     value2 = [getDateString(3) + " 00:00:00", getDateString(4) + " 00:00:00"];
                     expect(instance.get('datetimeRange')).eql([value1, value2]);
                     // selecting the same date time will do nothing
                     third.click();
-                    _context23.next = 35;
+                    _context22.next = 35;
                     return clickConfirm(content);
                   case 35:
                     fourth.click();
-                    _context23.next = 38;
+                    _context22.next = 38;
                     return clickConfirm(content);
                   case 38:
                     expect(instance.get('datetimeRange')).eql([value1, value2]);
                     instance.set('datetimeRange', []);
-                    _context23.next = 42;
+                    _context22.next = 42;
                     return wait();
                   case 42:
                     first.click();
-                    _context23.next = 45;
+                    _context22.next = 45;
                     return clickConfirm(content);
                   case 45:
                     second.click();
-                    _context23.next = 48;
+                    _context22.next = 48;
                     return clickConfirm(content);
                   case 48:
-                    confirm = _context23.sent;
+                    confirm = _context22.sent;
                     expect(instance.get('datetimeRange')).eql([value1]);
                     expect(confirm.classList.contains('k-disabled')).eql(true);
                   case 51:
                   case "end":
-                    return _context23.stop();
+                    return _context22.stop();
                 }
-              }, _callee23);
+              }, _callee22);
             })));
-            it('select time directly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
-              var _mount21, instance, element, _element$querySelecto11, select, content, calendar, activeHour;
-              return _regeneratorRuntime.wrap(function _callee24$(_context24) {
-                while (1) switch (_context24.prev = _context24.next) {
+            it('select time directly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+              var _mount19, instance, element, _element$querySelecto11, select, content, calendar, activeHour;
+              return _regeneratorRuntime.wrap(function _callee23$(_context23) {
+                while (1) switch (_context23.prev = _context23.next) {
                   case 0:
-                    _mount21 = mount(MultipleDemo), instance = _mount21[0], element = _mount21[1];
+                    _mount19 = mount(MultipleDemo), instance = _mount19[0], element = _mount19[1];
                     _element$querySelecto11 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto11[5];
                     dispatchEvent(select, 'click');
-                    _context24.next = 5;
+                    _context23.next = 5;
                     return wait();
                   case 5:
                     content = getElement('.k-datepicker-content');
                     calendar = content.querySelector('.k-datepicker-wrapper');
                     activeHour = calendar.querySelector('.k-scroll-select-item.k-active');
                     activeHour.nextElementSibling.click();
-                    _context24.next = 11;
+                    _context23.next = 11;
                     return clickConfirm(content);
                   case 11:
                     activeHour.nextElementSibling.click();
-                    _context24.next = 14;
+                    _context23.next = 14;
                     return clickConfirm(content);
                   case 14:
                     expect(instance.get('datetimeRange')).to.eql([[dateString + " 01:00:00", dateString + " 02:00:00"]]);
                   case 15:
                   case "end":
-                    return _context24.stop();
+                    return _context23.stop();
                 }
-              }, _callee24);
+              }, _callee23);
             })));
           case 2:
           case "end":
-            return _context25.stop();
+            return _context24.stop();
         }
-      }, _callee25);
+      }, _callee24);
     })));
   });
   describe('Range', function () {
-    describe('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
+    describe('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
       var instance, element, select, content, first;
-      return _regeneratorRuntime.wrap(function _callee31$(_context31) {
-        while (1) switch (_context31.prev = _context31.next) {
+      return _regeneratorRuntime.wrap(function _callee30$(_context30) {
+        while (1) switch (_context30.prev = _context30.next) {
           case 0:
-            beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
+            beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
               var result;
-              return _regeneratorRuntime.wrap(function _callee26$(_context26) {
-                while (1) switch (_context26.prev = _context26.next) {
+              return _regeneratorRuntime.wrap(function _callee25$(_context25) {
+                while (1) switch (_context25.prev = _context25.next) {
                   case 0:
                     result = mount(RangeDemo);
                     instance = result[0];
@@ -964,7 +952,7 @@ describe('Datepicker', function () {
                     // date
                     select = element.querySelector('.k-datepicker');
                     select.click();
-                    _context26.next = 7;
+                    _context25.next = 7;
                     return wait();
                   case 7:
                     content = getElement('.k-datepicker-content');
@@ -972,34 +960,34 @@ describe('Datepicker', function () {
                     first = content.querySelector('.k-calendar-item:nth-child(18)');
                   case 9:
                   case "end":
-                    return _context26.stop();
+                    return _context25.stop();
                 }
-              }, _callee26);
+              }, _callee25);
             })));
-            it('basic selection', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
+            it('basic selection', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
               var value;
-              return _regeneratorRuntime.wrap(function _callee27$(_context27) {
-                while (1) switch (_context27.prev = _context27.next) {
+              return _regeneratorRuntime.wrap(function _callee26$(_context26) {
+                while (1) switch (_context26.prev = _context26.next) {
                   case 0:
                     first.click();
-                    _context27.next = 3;
+                    _context26.next = 3;
                     return wait();
                   case 3:
                     expect(instance.get('date')).to.be.null;
                     // hover status
                     dispatchEvent(first.nextElementSibling.nextElementSibling, 'mouseenter');
-                    _context27.next = 7;
+                    _context26.next = 7;
                     return wait();
                   case 7:
                     expect(first.nextElementSibling.classList.contains('k-in-range')).to.be.true;
                     dispatchEvent(first.previousElementSibling.previousElementSibling, 'mouseenter');
-                    _context27.next = 11;
+                    _context26.next = 11;
                     return wait();
                   case 11:
                     expect(first.previousElementSibling.classList.contains('k-in-range')).to.be.true;
                     expect(first.nextElementSibling.classList.contains('k-in-range')).to.be.false;
                     dispatchEvent(first.previousElementSibling.previousElementSibling, 'click');
-                    _context27.next = 16;
+                    _context26.next = 16;
                     return wait();
                   case 16:
                     value = instance.get('date');
@@ -1007,19 +995,19 @@ describe('Datepicker', function () {
                     expect(value[0] < value[1]).to.be.true;
                   case 19:
                   case "end":
-                    return _context27.stop();
+                    return _context26.stop();
                 }
-              }, _callee27);
+              }, _callee26);
             })));
-            it('select the same date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
+            it('select the same date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
               var value1;
-              return _regeneratorRuntime.wrap(function _callee28$(_context28) {
-                while (1) switch (_context28.prev = _context28.next) {
+              return _regeneratorRuntime.wrap(function _callee27$(_context27) {
+                while (1) switch (_context27.prev = _context27.next) {
                   case 0:
                     // select the middle date
                     first.click();
                     first.click();
-                    _context28.next = 4;
+                    _context27.next = 4;
                     return wait();
                   case 4:
                     value1 = instance.get('date');
@@ -1027,51 +1015,51 @@ describe('Datepicker', function () {
                     expect(value1[0]).eql(value1[1]);
                   case 7:
                   case "end":
-                    return _context28.stop();
+                    return _context27.stop();
                 }
-              }, _callee28);
+              }, _callee27);
             })));
-            it('cross months', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
+            it('cross months', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
               var second;
-              return _regeneratorRuntime.wrap(function _callee29$(_context29) {
-                while (1) switch (_context29.prev = _context29.next) {
+              return _regeneratorRuntime.wrap(function _callee28$(_context28) {
+                while (1) switch (_context28.prev = _context28.next) {
                   case 0:
                     first.click();
                     second = content.querySelector('.k-datepicker-calendar-time-wrapper:nth-child(2) .k-calendar-item:nth-child(19)');
                     second.click();
-                    _context29.next = 5;
+                    _context28.next = 5;
                     return wait();
                   case 5:
                     expect(instance.get('date')).have.lengthOf(2);
                   case 6:
                   case "end":
-                    return _context29.stop();
+                    return _context28.stop();
                 }
-              }, _callee29);
+              }, _callee28);
             })));
-            it('can select end date which is less than start date on selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
+            it('can select end date which is less than start date on selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
               var first, inputInner;
-              return _regeneratorRuntime.wrap(function _callee30$(_context30) {
-                while (1) switch (_context30.prev = _context30.next) {
+              return _regeneratorRuntime.wrap(function _callee29$(_context29) {
+                while (1) switch (_context29.prev = _context29.next) {
                   case 0:
                     // hide firstly
                     document.body.click();
-                    _context30.next = 3;
+                    _context29.next = 3;
                     return wait();
                   case 3:
                     instance.set('date', ['2025-08-01', '2025-08-02']);
-                    _context30.next = 6;
+                    _context29.next = 6;
                     return wait();
                   case 6:
                     // show again
                     select.click();
-                    _context30.next = 9;
+                    _context29.next = 9;
                     return wait();
                   case 9:
                     // select date 3
                     first = content.querySelector('.k-calendar-item:not(.k-exceed):not(.k-active)');
                     first.click();
-                    _context30.next = 13;
+                    _context29.next = 13;
                     return wait();
                   case 13:
                     inputInner = select.querySelector('.k-input-inner');
@@ -1079,50 +1067,50 @@ describe('Datepicker', function () {
                     expect(instance.get('date')).eql(['2025-08-01', '2025-08-02']);
                     // should update value after hiding
                     document.body.click();
-                    _context30.next = 19;
+                    _context29.next = 19;
                     return wait();
                   case 19:
                     expect(inputInner.value).eql('2025-08-02 ~ 2025-08-03');
                     expect(instance.get('date')).eql(['2025-08-02', '2025-08-03']);
                   case 21:
                   case "end":
-                    return _context30.stop();
+                    return _context29.stop();
                 }
-              }, _callee30);
+              }, _callee29);
             })));
           case 5:
           case "end":
-            return _context31.stop();
+            return _context30.stop();
         }
-      }, _callee31);
+      }, _callee30);
     })));
-    describe('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee41() {
+    describe('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee40() {
       var instance, element, datetime, dateString, match, show, _show4;
-      return _regeneratorRuntime.wrap(function _callee41$(_context41) {
-        while (1) switch (_context41.prev = _context41.next) {
+      return _regeneratorRuntime.wrap(function _callee40$(_context40) {
+        while (1) switch (_context40.prev = _context40.next) {
           case 0:
             _show4 = function _show6() {
-              _show4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee40() {
+              _show4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee39() {
                 var content, first;
-                return _regeneratorRuntime.wrap(function _callee40$(_context40) {
-                  while (1) switch (_context40.prev = _context40.next) {
+                return _regeneratorRuntime.wrap(function _callee39$(_context39) {
+                  while (1) switch (_context39.prev = _context39.next) {
                     case 0:
                       datetime.click();
-                      _context40.next = 3;
+                      _context39.next = 3;
                       return wait();
                     case 3:
                       content = getElement('.k-datepicker-content');
                       first = content.querySelector('.k-calendar-item:not(.k-exceed)');
                       first.click();
-                      _context40.next = 8;
+                      _context39.next = 8;
                       return wait();
                     case 8:
-                      return _context40.abrupt("return", [content, first]);
+                      return _context39.abrupt("return", [content, first]);
                     case 9:
                     case "end":
-                      return _context40.stop();
+                      return _context39.stop();
                   }
-                }, _callee40);
+                }, _callee39);
               }));
               return _show4.apply(this, arguments);
             };
@@ -1139,15 +1127,15 @@ describe('Datepicker', function () {
               element = result[1];
               datetime = element.querySelectorAll('.k-datepicker')[1];
             });
-            it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
+            it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
               var _yield$show, content, first, confirm, inputInner, second, endDateString;
-              return _regeneratorRuntime.wrap(function _callee32$(_context32) {
-                while (1) switch (_context32.prev = _context32.next) {
+              return _regeneratorRuntime.wrap(function _callee31$(_context31) {
+                while (1) switch (_context31.prev = _context31.next) {
                   case 0:
-                    _context32.next = 2;
+                    _context31.next = 2;
                     return show();
                   case 2:
-                    _yield$show = _context32.sent;
+                    _yield$show = _context31.sent;
                     content = _yield$show[0];
                     first = _yield$show[1];
                     // should enable confirm button and show the first date string in input
@@ -1159,13 +1147,13 @@ describe('Datepicker', function () {
                     expect(instance.get('time')).eql(null);
                     // select time
                     dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
-                    _context32.next = 14;
+                    _context31.next = 14;
                     return wait();
                   case 14:
                     match(inputInner.getAttribute('placeholder'), '15:00:00 ~');
                     match(inputInner.value, '15:00:00 ~');
                     confirm.click();
-                    _context32.next = 19;
+                    _context31.next = 19;
                     return wait();
                   case 19:
                     // should disable confirm button on first click
@@ -1173,7 +1161,7 @@ describe('Datepicker', function () {
                     // select the second datetime
                     second = first.nextElementSibling;
                     second.click();
-                    _context32.next = 24;
+                    _context31.next = 24;
                     return wait();
                   case 24:
                     endDateString = dayjs(now).date(2).format('YYYY-MM-DD');
@@ -1181,132 +1169,132 @@ describe('Datepicker', function () {
                     expect(inputInner.value).eql(dateString + " 15:00:00 ~ " + endDateString + " 00:00:00");
                     expect(instance.get('time')).eql(null);
                     confirm.click();
-                    _context32.next = 31;
+                    _context31.next = 31;
                     return wait();
                   case 31:
                     expect(instance.get('time')).eql([dateString + " 15:00:00", endDateString + " 00:00:00"]);
                   case 32:
                   case "end":
-                    return _context32.stop();
+                    return _context31.stop();
                 }
-              }, _callee32);
+              }, _callee31);
             })));
-            it('skip select date and select time for the end value directly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
+            it('skip select date and select time for the end value directly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
               var _yield$show2, content, confirm;
-              return _regeneratorRuntime.wrap(function _callee33$(_context33) {
-                while (1) switch (_context33.prev = _context33.next) {
+              return _regeneratorRuntime.wrap(function _callee32$(_context32) {
+                while (1) switch (_context32.prev = _context32.next) {
                   case 0:
-                    _context33.next = 2;
+                    _context32.next = 2;
                     return show();
                   case 2:
-                    _yield$show2 = _context33.sent;
+                    _yield$show2 = _context32.sent;
                     content = _yield$show2[0];
-                    _context33.next = 6;
+                    _context32.next = 6;
                     return clickConfirm(content);
                   case 6:
-                    confirm = _context33.sent;
+                    confirm = _context32.sent;
                     // select time
                     dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
-                    _context33.next = 10;
+                    _context32.next = 10;
                     return wait();
                   case 10:
                     confirm.click();
-                    _context33.next = 13;
+                    _context32.next = 13;
                     return wait();
                   case 13:
                     expect(instance.get('time')).eql([dateString + " 00:00:00", dateString + " 15:00:00"]);
                   case 14:
                   case "end":
-                    return _context33.stop();
+                    return _context32.stop();
                 }
-              }, _callee33);
+              }, _callee32);
             })));
-            it('can change date before click confirm button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
+            it('can change date before click confirm button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
               var _yield$show3, content, first, nextFirst, inputInner, dateString, confirm, second;
-              return _regeneratorRuntime.wrap(function _callee34$(_context34) {
-                while (1) switch (_context34.prev = _context34.next) {
+              return _regeneratorRuntime.wrap(function _callee33$(_context33) {
+                while (1) switch (_context33.prev = _context33.next) {
                   case 0:
-                    _context34.next = 2;
+                    _context33.next = 2;
                     return show();
                   case 2:
-                    _yield$show3 = _context34.sent;
+                    _yield$show3 = _context33.sent;
                     content = _yield$show3[0];
                     first = _yield$show3[1];
                     nextFirst = first.nextElementSibling;
                     nextFirst.click();
-                    _context34.next = 9;
+                    _context33.next = 9;
                     return wait();
                   case 9:
                     inputInner = datetime.querySelector('.k-input-inner');
                     dateString = dayjs(now).date(2).format('YYYY-MM-DD');
                     expect(inputInner.value).to.eql(dateString + " 00:00:00 ~");
-                    _context34.next = 14;
+                    _context33.next = 14;
                     return clickConfirm(content);
                   case 14:
-                    confirm = _context34.sent;
+                    confirm = _context33.sent;
                     second = nextFirst.nextElementSibling;
                     second.click();
-                    _context34.next = 19;
+                    _context33.next = 19;
                     return wait();
                   case 19:
                     expect(inputInner.value).to.eql(dateString + " 00:00:00 ~ " + getDateString(3) + " 00:00:00");
                     second.nextElementSibling.click();
-                    _context34.next = 23;
+                    _context33.next = 23;
                     return wait();
                   case 23:
                     expect(inputInner.value).to.eql(dateString + " 00:00:00 ~ " + getDateString(4) + " 00:00:00");
                     confirm.click();
-                    _context34.next = 27;
+                    _context33.next = 27;
                     return wait();
                   case 27:
                     expect(inputInner.value).to.eql(dateString + " 00:00:00 ~ " + getDateString(4) + " 00:00:00");
                     expect(instance.get('time')).to.eql([dateString + " 00:00:00", getDateString(4) + " 00:00:00"]);
                   case 29:
                   case "end":
-                    return _context34.stop();
+                    return _context33.stop();
                 }
-              }, _callee34);
+              }, _callee33);
             })));
-            it('can select end date which is less than start date on selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
+            it('can select end date which is less than start date on selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
               var _yield$show4, content, first, nextFirst, inputInner, confirm, a, b;
-              return _regeneratorRuntime.wrap(function _callee35$(_context35) {
-                while (1) switch (_context35.prev = _context35.next) {
+              return _regeneratorRuntime.wrap(function _callee34$(_context34) {
+                while (1) switch (_context34.prev = _context34.next) {
                   case 0:
-                    _context35.next = 2;
+                    _context34.next = 2;
                     return show();
                   case 2:
-                    _yield$show4 = _context35.sent;
+                    _yield$show4 = _context34.sent;
                     content = _yield$show4[0];
                     first = _yield$show4[1];
                     nextFirst = first.nextElementSibling;
                     nextFirst.click();
-                    _context35.next = 9;
+                    _context34.next = 9;
                     return wait();
                   case 9:
                     inputInner = datetime.querySelector('.k-input-inner');
                     expect(inputInner.value).to.eql(getDateString(2) + " 00:00:00 ~");
                     // hide to reset the selected state
                     document.body.click();
-                    _context35.next = 14;
+                    _context34.next = 14;
                     return wait();
                   case 14:
                     expect(inputInner.value).to.eql("");
                     expect(instance.get('time')).to.be.null;
                     // show again
                     datetime.click();
-                    _context35.next = 19;
+                    _context34.next = 19;
                     return wait();
                   case 19:
                     nextFirst.click();
-                    _context35.next = 22;
+                    _context34.next = 22;
                     return wait();
                   case 22:
-                    _context35.next = 24;
+                    _context34.next = 24;
                     return clickConfirm(content);
                   case 24:
-                    confirm = _context35.sent;
+                    confirm = _context34.sent;
                     first.click();
-                    _context35.next = 28;
+                    _context34.next = 28;
                     return wait();
                   case 28:
                     a = getDateString(2) + " 00:00:00";
@@ -1314,52 +1302,52 @@ describe('Datepicker', function () {
                     expect(inputInner.value).to.eql(a + " ~ " + b);
                     expect(instance.get('time')).to.eql(null);
                     confirm.click();
-                    _context35.next = 35;
+                    _context34.next = 35;
                     return wait();
                   case 35:
                     expect(instance.get('time')).to.eql([b, a]);
                   case 36:
                   case "end":
-                    return _context35.stop();
+                    return _context34.stop();
                 }
-              }, _callee35);
+              }, _callee34);
             })));
-            it('should reset position on clear value or set value to empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
+            it('should reset position on clear value or set value to empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
               var a, b, _yield$show5, content, first, selectAgain, _selectAgain;
-              return _regeneratorRuntime.wrap(function _callee37$(_context37) {
-                while (1) switch (_context37.prev = _context37.next) {
+              return _regeneratorRuntime.wrap(function _callee36$(_context36) {
+                while (1) switch (_context36.prev = _context36.next) {
                   case 0:
                     _selectAgain = function _selectAgain3() {
-                      _selectAgain = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
+                      _selectAgain = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
                         var confirm;
-                        return _regeneratorRuntime.wrap(function _callee36$(_context36) {
-                          while (1) switch (_context36.prev = _context36.next) {
+                        return _regeneratorRuntime.wrap(function _callee35$(_context35) {
+                          while (1) switch (_context35.prev = _context35.next) {
                             case 0:
-                              _context36.next = 2;
+                              _context35.next = 2;
                               return wait();
                             case 2:
                               first.click();
-                              _context36.next = 5;
+                              _context35.next = 5;
                               return wait();
                             case 5:
-                              _context36.next = 7;
+                              _context35.next = 7;
                               return clickConfirm(content);
                             case 7:
-                              confirm = _context36.sent;
+                              confirm = _context35.sent;
                               first.nextElementSibling.click();
-                              _context36.next = 11;
+                              _context35.next = 11;
                               return wait();
                             case 11:
                               confirm.click();
-                              _context36.next = 14;
+                              _context35.next = 14;
                               return wait();
                             case 14:
                               expect(instance.get('time')).eql([a, b]);
                             case 15:
                             case "end":
-                              return _context36.stop();
+                              return _context35.stop();
                           }
-                        }, _callee36);
+                        }, _callee35);
                       }));
                       return _selectAgain.apply(this, arguments);
                     };
@@ -1369,67 +1357,67 @@ describe('Datepicker', function () {
                     a = getDateString(1) + " 00:00:00";
                     b = getDateString(2) + " 00:00:00";
                     instance.set('time', [a, b]);
-                    _context37.next = 7;
+                    _context36.next = 7;
                     return show();
                   case 7:
-                    _yield$show5 = _context37.sent;
+                    _yield$show5 = _context36.sent;
                     content = _yield$show5[0];
                     first = _yield$show5[1];
                     // clear
                     dispatchEvent(datetime.querySelector('.k-select-clear'), 'click');
-                    _context37.next = 13;
+                    _context36.next = 13;
                     return wait();
                   case 13:
                     expect(instance.get('time')).eql(null);
-                    _context37.next = 16;
+                    _context36.next = 16;
                     return selectAgain();
                   case 16:
                     // set time to null
                     datetime.click();
-                    _context37.next = 19;
+                    _context36.next = 19;
                     return wait();
                   case 19:
                     instance.set('time', null);
-                    _context37.next = 22;
+                    _context36.next = 22;
                     return selectAgain();
                   case 22:
                     // set time to empty array
                     datetime.click();
-                    _context37.next = 25;
+                    _context36.next = 25;
                     return wait();
                   case 25:
                     instance.set('time', []);
-                    _context37.next = 28;
+                    _context36.next = 28;
                     return selectAgain();
                   case 28:
                   case "end":
-                    return _context37.stop();
+                    return _context36.stop();
                 }
-              }, _callee37);
+              }, _callee36);
             })));
-            it('should only auto hide after twice selection and the start and end datetime are already selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee39() {
+            it('should only auto hide after twice selection and the start and end datetime are already selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
               var _yield$show6, content, first, next, confirm, startDate, endDate, inputInner, separatePos, newFirst, _checkDisplay, setCursor, resetAndShow, _resetAndShow;
-              return _regeneratorRuntime.wrap(function _callee39$(_context39) {
-                while (1) switch (_context39.prev = _context39.next) {
+              return _regeneratorRuntime.wrap(function _callee38$(_context38) {
+                while (1) switch (_context38.prev = _context38.next) {
                   case 0:
                     _resetAndShow = function _resetAndShow3() {
-                      _resetAndShow = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
-                        return _regeneratorRuntime.wrap(function _callee38$(_context38) {
-                          while (1) switch (_context38.prev = _context38.next) {
+                      _resetAndShow = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
+                        return _regeneratorRuntime.wrap(function _callee37$(_context37) {
+                          while (1) switch (_context37.prev = _context37.next) {
                             case 0:
                               instance.set('time', [startDate, endDate]);
-                              _context38.next = 3;
+                              _context37.next = 3;
                               return wait();
                             case 3:
                               setCursor(separatePos + 1);
                               datetime.click();
-                              _context38.next = 7;
+                              _context37.next = 7;
                               return wait();
                             case 7:
                             case "end":
-                              return _context38.stop();
+                              return _context37.stop();
                           }
-                        }, _callee38);
+                        }, _callee37);
                       }));
                       return _resetAndShow.apply(this, arguments);
                     };
@@ -1443,31 +1431,31 @@ describe('Datepicker', function () {
                     _checkDisplay = function _checkDisplay2(isShow) {
                       checkDisplay(content, isShow);
                     };
-                    _context39.next = 6;
+                    _context38.next = 6;
                     return show();
                   case 6:
-                    _yield$show6 = _context39.sent;
+                    _yield$show6 = _context38.sent;
                     content = _yield$show6[0];
                     first = _yield$show6[1];
                     next = first.nextElementSibling;
                     next.click();
-                    _context39.next = 13;
+                    _context38.next = 13;
                     return wait();
                   case 13:
-                    _context39.next = 15;
+                    _context38.next = 15;
                     return clickConfirm(content);
                   case 15:
-                    confirm = _context39.sent;
-                    _context39.next = 18;
+                    confirm = _context38.sent;
+                    _context38.next = 18;
                     return wait();
                   case 18:
                     _checkDisplay(true);
                     first.click();
-                    _context39.next = 22;
+                    _context38.next = 22;
                     return wait();
                   case 22:
                     confirm.click();
-                    _context39.next = 25;
+                    _context38.next = 25;
                     return wait();
                   case 25:
                     _checkDisplay(false);
@@ -1475,108 +1463,108 @@ describe('Datepicker', function () {
                     endDate = '2025-08-10 00:00:00';
                     inputInner = datetime.querySelector('.k-input-inner');
                     separatePos = (dateString + " 00:00:00 ~").length;
-                    _context39.next = 32;
+                    _context38.next = 32;
                     return resetAndShow();
                   case 32:
                     newFirst = content.querySelector('.k-calendar-item:not(.k-exceed)');
                     newFirst.click();
-                    _context39.next = 36;
+                    _context38.next = 36;
                     return wait();
                   case 36:
                     confirm.click();
-                    _context39.next = 39;
+                    _context38.next = 39;
                     return wait();
                   case 39:
                     _checkDisplay(true);
                     expect(instance.get('time')).eql([startDate, endDate]);
                     // cancel the start time selection
                     document.body.click();
-                    _context39.next = 44;
+                    _context38.next = 44;
                     return wait();
                   case 44:
                     expect(instance.get('time')).eql(['2025-08-01 00:00:00', startDate]);
                     // select from end position to start position
-                    _context39.next = 47;
+                    _context38.next = 47;
                     return resetAndShow();
                   case 47:
                     newFirst.click();
-                    _context39.next = 50;
+                    _context38.next = 50;
                     return wait();
                   case 50:
                     confirm.click();
-                    _context39.next = 53;
+                    _context38.next = 53;
                     return wait();
                   case 53:
                     newFirst.nextElementSibling.click();
-                    _context39.next = 56;
+                    _context38.next = 56;
                     return wait();
                   case 56:
                     _checkDisplay(true);
                     expect(instance.get('time')).eql([startDate, endDate]);
                     confirm.click();
-                    _context39.next = 61;
+                    _context38.next = 61;
                     return wait();
                   case 61:
                     _checkDisplay(false);
                     expect(instance.get('time')).eql(['2025-08-01 00:00:00', '2025-08-02 00:00:00']);
                     // select the end position value then change to end position again 
-                    _context39.next = 65;
+                    _context38.next = 65;
                     return resetAndShow();
                   case 65:
                     newFirst.click();
-                    _context39.next = 68;
+                    _context38.next = 68;
                     return wait();
                   case 68:
                     confirm.click();
-                    _context39.next = 71;
+                    _context38.next = 71;
                     return wait();
                   case 71:
                     // change to the end position
                     setCursor(separatePos + 1);
                     datetime.click();
                     newFirst.nextElementSibling.click();
-                    _context39.next = 76;
+                    _context38.next = 76;
                     return wait();
                   case 76:
                     _checkDisplay(true);
                     confirm.click();
                     // should not hide 
-                    _context39.next = 80;
+                    _context38.next = 80;
                     return wait();
                   case 80:
                     _checkDisplay(true);
                     // select the start position value
                     newFirst.click();
-                    _context39.next = 84;
+                    _context38.next = 84;
                     return wait();
                   case 84:
                     confirm.click();
-                    _context39.next = 87;
+                    _context38.next = 87;
                     return wait();
                   case 87:
                     _checkDisplay(false);
                     expect(instance.get('time')).eql(['2025-08-01 00:00:00', '2025-08-02 00:00:00']);
                   case 89:
                   case "end":
-                    return _context39.stop();
+                    return _context38.stop();
                 }
-              }, _callee39);
+              }, _callee38);
             })));
           case 11:
           case "end":
-            return _context41.stop();
+            return _context40.stop();
         }
-      }, _callee41);
+      }, _callee40);
     })));
-    it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee42() {
-      var _mount22, instance, element, _element$querySelecto12, select, content, _content$querySelecto9, calendar1, calendar2, first, second, value;
-      return _regeneratorRuntime.wrap(function _callee42$(_context42) {
-        while (1) switch (_context42.prev = _context42.next) {
+    it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee41() {
+      var _mount20, instance, element, _element$querySelecto12, select, content, _content$querySelecto9, calendar1, calendar2, first, second, value;
+      return _regeneratorRuntime.wrap(function _callee41$(_context41) {
+        while (1) switch (_context41.prev = _context41.next) {
           case 0:
-            _mount22 = mount(RangeDemo), instance = _mount22[0], element = _mount22[1];
+            _mount20 = mount(RangeDemo), instance = _mount20[0], element = _mount20[1];
             _element$querySelecto12 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto12[2];
             select.click();
-            _context42.next = 5;
+            _context41.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
@@ -1585,26 +1573,26 @@ describe('Datepicker', function () {
             second = calendar2.querySelector('.k-calendar-item:nth-child(2)');
             first.click();
             second.click();
-            _context42.next = 13;
+            _context41.next = 13;
             return wait();
           case 13:
             value = instance.get('year');
             expect(value).eql([String(startYear), String(startYear + 10)]);
           case 15:
           case "end":
-            return _context42.stop();
+            return _context41.stop();
         }
-      }, _callee42);
+      }, _callee41);
     })));
-    it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee43() {
-      var _mount23, instance, element, _element$querySelecto13, select, content, _content$querySelecto10, calendar1, calendar2, first, second, value;
-      return _regeneratorRuntime.wrap(function _callee43$(_context43) {
-        while (1) switch (_context43.prev = _context43.next) {
+    it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee42() {
+      var _mount21, instance, element, _element$querySelecto13, select, content, _content$querySelecto10, calendar1, calendar2, first, second, value;
+      return _regeneratorRuntime.wrap(function _callee42$(_context42) {
+        while (1) switch (_context42.prev = _context42.next) {
           case 0:
-            _mount23 = mount(RangeDemo), instance = _mount23[0], element = _mount23[1];
+            _mount21 = mount(RangeDemo), instance = _mount21[0], element = _mount21[1];
             _element$querySelecto13 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto13[3];
             select.click();
-            _context43.next = 5;
+            _context42.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
@@ -1613,37 +1601,37 @@ describe('Datepicker', function () {
             second = calendar2.querySelector('.k-calendar-item:nth-child(1)');
             first.click();
             second.click();
-            _context43.next = 13;
+            _context42.next = 13;
             return wait();
           case 13:
             value = instance.get('month');
             expect(value).eql([year + "-01", year + 1 + "-01"]);
           case 15:
           case "end":
-            return _context43.stop();
+            return _context42.stop();
         }
-      }, _callee43);
+      }, _callee42);
     })));
   });
   describe('Keybord', function () {
-    it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee44() {
-      var _context44;
-      var _mount24, instance, element, now, select, content;
-      return _regeneratorRuntime.wrap(function _callee44$(_context45) {
-        while (1) switch (_context45.prev = _context45.next) {
+    it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee43() {
+      var _context43;
+      var _mount22, instance, element, now, select, content;
+      return _regeneratorRuntime.wrap(function _callee43$(_context44) {
+        while (1) switch (_context44.prev = _context44.next) {
           case 0:
-            _mount24 = mount(BasicDemo), instance = _mount24[0], element = _mount24[1];
+            _mount22 = mount(BasicDemo), instance = _mount22[0], element = _mount22[1];
             now = new Date();
             select = element.querySelector('.k-datepicker');
             select.click();
-            _context45.next = 6;
+            _context44.next = 6;
             return wait();
           case 6:
             content = getElement('.k-datepicker-content'); // down
             dispatchEvent(select, 'keydown', {
               keyCode: 40
             });
-            _context45.next = 10;
+            _context44.next = 10;
             return wait();
           case 10:
             expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate());
@@ -1651,7 +1639,7 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 38
             });
-            _context45.next = 14;
+            _context44.next = 14;
             return wait();
           case 14:
             now.setDate(now.getDate() - 7);
@@ -1660,7 +1648,7 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 39
             });
-            _context45.next = 19;
+            _context44.next = 19;
             return wait();
           case 19:
             now.setDate(now.getDate() + 1);
@@ -1669,7 +1657,7 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 37
             });
-            _context45.next = 24;
+            _context44.next = 24;
             return wait();
           case 24:
             now.setDate(now.getDate() - 1);
@@ -1678,39 +1666,39 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 13
             });
-            _context45.next = 29;
+            _context44.next = 29;
             return wait();
           case 29:
-            expect(_mapInstanceProperty(_context44 = instance.get('date').split('-')).call(_context44, function (v) {
+            expect(_mapInstanceProperty(_context43 = instance.get('date').split('-')).call(_context43, function (v) {
               return +v;
             })).to.eql([now.getFullYear(), now.getMonth() + 1, now.getDate()]);
             // again
             select.click();
-            _context45.next = 33;
+            _context44.next = 33;
             return wait();
           case 33:
             dispatchEvent(select, 'keydown', {
               keyCode: 40
             });
-            _context45.next = 36;
+            _context44.next = 36;
             return wait();
           case 36:
             expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate());
           case 37:
           case "end":
-            return _context45.stop();
+            return _context44.stop();
         }
-      }, _callee44);
+      }, _callee43);
     })));
-    it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee45() {
-      var _mount25, instance, element, select, value, _value;
-      return _regeneratorRuntime.wrap(function _callee45$(_context46) {
-        while (1) switch (_context46.prev = _context46.next) {
+    it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee44() {
+      var _mount23, instance, element, select, value, _value;
+      return _regeneratorRuntime.wrap(function _callee44$(_context45) {
+        while (1) switch (_context45.prev = _context45.next) {
           case 0:
-            _mount25 = mount(RangeDemo), instance = _mount25[0], element = _mount25[1];
+            _mount23 = mount(RangeDemo), instance = _mount23[0], element = _mount23[1];
             select = element.querySelector('.k-datepicker');
             select.click();
-            _context46.next = 5;
+            _context45.next = 5;
             return wait();
           case 5:
             dispatchEvent(select, 'keydown', {
@@ -1725,14 +1713,14 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 13
             });
-            _context46.next = 11;
+            _context45.next = 11;
             return wait();
           case 11:
             value = instance.get('date');
             expect(value).have.lengthOf(2);
             // again
             select.click();
-            _context46.next = 16;
+            _context45.next = 16;
             return wait();
           case 16:
             dispatchEvent(select, 'keydown', {
@@ -1744,26 +1732,26 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 13
             });
-            _context46.next = 21;
+            _context45.next = 21;
             return wait();
           case 21:
             _value = instance.get('date');
             expect(_value[0]).eql(_value[1]);
           case 23:
           case "end":
-            return _context46.stop();
+            return _context45.stop();
         }
-      }, _callee45);
+      }, _callee44);
     })));
   });
   describe('Event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee47() {
-    return _regeneratorRuntime.wrap(function _callee47$(_context49) {
-      while (1) switch (_context49.prev = _context49.next) {
+    return _regeneratorRuntime.wrap(function _callee47$(_context50) {
+      while (1) switch (_context50.prev = _context50.next) {
         case 0:
-          it('selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee46() {
-            var fn, Demo, _mount26, instance, element, content, calendar, first, second, firstDateItem, activeTimeItem, nextTimeItem, confirmBtn, endCalendar, endFirst, endSecond, endDateItem, endActiveTimeItem, endNextTimeItem, finalConfirmBtn;
-            return _regeneratorRuntime.wrap(function _callee46$(_context48) {
-              while (1) switch (_context48.prev = _context48.next) {
+          it('selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee45() {
+            var fn, Demo, _mount24, instance, element, content, calendar, first, second, firstDateItem, activeTimeItem, nextTimeItem, confirmBtn, endCalendar, endFirst, endSecond, endDateItem, endActiveTimeItem, endNextTimeItem, finalConfirmBtn;
+            return _regeneratorRuntime.wrap(function _callee45$(_context47) {
+              while (1) switch (_context47.prev = _context47.next) {
                 case 0:
                   fn = sinon.spy(function (v) {
                     return console.log(v);
@@ -1771,12 +1759,12 @@ describe('Datepicker', function () {
                   Demo = /*#__PURE__*/function (_Component) {
                     _inheritsLoose(Demo, _Component);
                     function Demo() {
-                      var _context47;
+                      var _context46;
                       var _this;
                       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
                         args[_key] = arguments[_key];
                       }
-                      _this = _Component.call.apply(_Component, _concatInstanceProperty(_context47 = [this]).call(_context47, args)) || this;
+                      _this = _Component.call.apply(_Component, _concatInstanceProperty(_context46 = [this]).call(_context46, args)) || this;
                       _this.Datepicker = Datepicker;
                       return _this;
                     }
@@ -1787,9 +1775,9 @@ describe('Datepicker', function () {
                     return Demo;
                   }(Component);
                   Demo.template = "\n                    const {Datepicker} = this;\n                    <Datepicker ev-selecting={this.onSelecting} range type=\"datetime\" />\n                ";
-                  _mount26 = mount(Demo), instance = _mount26[0], element = _mount26[1];
+                  _mount24 = mount(Demo), instance = _mount24[0], element = _mount24[1];
                   element.click();
-                  _context48.next = 7;
+                  _context47.next = 7;
                   return wait();
                 case 7:
                   content = getElement('.k-datepicker-content');
@@ -1807,7 +1795,7 @@ describe('Datepicker', function () {
                   expect(fn.lastCall.args[0]).have.lengthOf(1);
                   confirmBtn = content.querySelector('.k-datepicker-footer .k-btn');
                   confirmBtn.click();
-                  _context48.next = 24;
+                  _context47.next = 24;
                   return wait();
                 case 24:
                   endCalendar = content.querySelector('.k-datepicker-calendar-time-wrapper');
@@ -1824,111 +1812,161 @@ describe('Datepicker', function () {
                   expect(fn.lastCall.args[0]).have.lengthOf(1);
                   finalConfirmBtn = content.querySelector('.k-datepicker-footer .k-btn');
                   finalConfirmBtn.click();
-                  _context48.next = 40;
+                  _context47.next = 40;
                   return wait();
                 case 40:
                   expect(fn.callCount).to.eql(4);
                 case 41:
                 case "end":
-                  return _context48.stop();
+                  return _context47.stop();
+              }
+            }, _callee45);
+          })));
+          it('should trigger change event once', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee46() {
+            var change, Demo, _mount25, instance, element, input, calendar, _calendar$querySelect, day1, day2;
+            return _regeneratorRuntime.wrap(function _callee46$(_context49) {
+              while (1) switch (_context49.prev = _context49.next) {
+                case 0:
+                  change = sinon.spy(function () {
+                    return console.log('change');
+                  });
+                  Demo = /*#__PURE__*/function (_Component2) {
+                    _inheritsLoose(Demo, _Component2);
+                    function Demo() {
+                      var _context48;
+                      var _this2;
+                      for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                        args[_key2] = arguments[_key2];
+                      }
+                      _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context48 = [this]).call(_context48, args)) || this;
+                      _this2.Datepicker = Datepicker;
+                      return _this2;
+                    }
+                    var _proto2 = Demo.prototype;
+                    _proto2.onChange = function onChange() {
+                      change();
+                    };
+                    return Demo;
+                  }(Component);
+                  Demo.template = "\n                    const {Datepicker} = this;\n                    <Datepicker range ev-$change:value={this.onChange} v-model=\"value\" clearable />\n                ";
+                  _mount25 = mount(Demo), instance = _mount25[0], element = _mount25[1];
+                  input = element.querySelector('.k-input-inner');
+                  input.click();
+                  _context49.next = 8;
+                  return wait();
+                case 8:
+                  calendar = getElement('.k-datepicker-content');
+                  _calendar$querySelect = calendar.querySelectorAll('.k-calendar-item:not(.k-exceed)'), day1 = _calendar$querySelect[0], day2 = _calendar$querySelect[1];
+                  day1.click();
+                  _context49.next = 13;
+                  return wait();
+                case 13:
+                  day2.click();
+                  _context49.next = 16;
+                  return wait();
+                case 16:
+                  expect(change.callCount).to.eql(1);
+                case 17:
+                case "end":
+                  return _context49.stop();
               }
             }, _callee46);
           })));
-        case 1:
+        case 2:
         case "end":
-          return _context49.stop();
+          return _context50.stop();
       }
     }, _callee47);
   })));
   it('should disable some time pickers', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee48() {
-    var _mount27, instance, element, input, content;
-    return _regeneratorRuntime.wrap(function _callee48$(_context50) {
-      while (1) switch (_context50.prev = _context50.next) {
+    var _mount26, instance, element, input, content;
+    return _regeneratorRuntime.wrap(function _callee48$(_context51) {
+      while (1) switch (_context51.prev = _context51.next) {
         case 0:
-          _mount27 = mount(DatetimeDemo), instance = _mount27[0], element = _mount27[1];
+          _mount26 = mount(DatetimeDemo), instance = _mount26[0], element = _mount26[1];
           input = element.querySelectorAll('.k-input')[1];
           input.click();
-          _context50.next = 5;
+          _context51.next = 5;
           return wait();
         case 5:
           content = getElement('.k-datepicker-content'); // change to time panel
           content.querySelector('.k-calendar-item').click();
-          _context50.next = 9;
+          _context51.next = 9;
           return wait();
         case 9:
           dispatchEvent(content.querySelector('.k-scroll-select:nth-child(3) .k-scroll-select-item'), 'click');
           content.querySelector('.k-datepicker-footer .k-btn').click();
-          _context50.next = 13;
+          _context51.next = 13;
           return wait();
         case 13:
           expect(instance.get('datetime2').split(' ')[1]).eql('00:00');
         case 14:
         case "end":
-          return _context50.stop();
+          return _context51.stop();
       }
     }, _callee48);
   })));
   it('format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee49() {
-    var _mount28, instance, element, _element$querySelecto14, input1, input2, input3, content;
-    return _regeneratorRuntime.wrap(function _callee49$(_context51) {
-      while (1) switch (_context51.prev = _context51.next) {
+    var _mount27, instance, element, _element$querySelecto14, input1, input2, input3, content;
+    return _regeneratorRuntime.wrap(function _callee49$(_context52) {
+      while (1) switch (_context52.prev = _context52.next) {
         case 0:
-          _mount28 = mount(FormatDemo), instance = _mount28[0], element = _mount28[1];
+          _mount27 = mount(FormatDemo), instance = _mount27[0], element = _mount27[1];
           _element$querySelecto14 = element.querySelectorAll('.k-input-inner'), input1 = _element$querySelecto14[0], input2 = _element$querySelecto14[1], input3 = _element$querySelecto14[2];
           input1.click();
-          _context51.next = 5;
+          _context52.next = 5;
           return wait();
         case 5:
           content = getElement('.k-datepicker-content');
           content.querySelector('.k-today').click();
-          _context51.next = 9;
+          _context52.next = 9;
           return wait();
         case 9:
           expect(instance.get('date1')).to.eql(dayjs().format('MM/DD/YYYY'));
           expect(input1.value).to.eql(dayjs().format('MM/DD/YYYY'));
           input2.click();
-          _context51.next = 14;
+          _context52.next = 14;
           return wait();
         case 14:
           content = getElement('.k-datepicker-content');
           content.querySelector('.k-today').click();
-          _context51.next = 18;
+          _context52.next = 18;
           return wait();
         case 18:
           expect(instance.get('date2')).to.eql(dayjs().format('YYYY-MM-DD'));
           expect(input2.value).to.eql(dayjs().format('YYYY年M月D日'));
           input3.click();
-          _context51.next = 23;
+          _context52.next = 23;
           return wait();
         case 23:
           content = getElement('.k-datepicker-content');
           content.querySelector('.k-today').click();
-          _context51.next = 27;
+          _context52.next = 27;
           return wait();
         case 27:
           content.querySelector('.k-datepicker-footer .k-btn').click();
-          _context51.next = 30;
+          _context52.next = 30;
           return wait();
         case 30:
           expect(instance.get('date3')).to.eql(dayjs().format('YYYY-MM-DD') + 'T00:00:00.000Z');
           expect(input3.value).to.eql(dayjs().format('YYYY-MM-DD') + ' 00:00:00');
         case 32:
         case "end":
-          return _context51.stop();
+          return _context52.stop();
       }
     }, _callee49);
   })));
   describe('Max / Min', function () {
     it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee50() {
-      var _mount29, instance, element, now, content, dateDoms;
-      return _regeneratorRuntime.wrap(function _callee50$(_context52) {
-        while (1) switch (_context52.prev = _context52.next) {
+      var _mount28, instance, element, now, content, dateDoms;
+      return _regeneratorRuntime.wrap(function _callee50$(_context53) {
+        while (1) switch (_context53.prev = _context53.next) {
           case 0:
-            _mount29 = mount(MaxMinDemo), instance = _mount29[0], element = _mount29[1];
+            _mount28 = mount(MaxMinDemo), instance = _mount28[0], element = _mount28[1];
             now = dayjs().format('YYYY-MM-DD');
             instance.set('to', now);
             element.querySelector('.k-datepicker').click();
-            _context52.next = 6;
+            _context53.next = 6;
             return wait();
           case 6:
             content = getElement('.k-datepicker-content');
@@ -1937,62 +1975,62 @@ describe('Datepicker', function () {
             expect(+dateDoms[0].textContent).to.eql(+now.split('-')[2]);
           case 10:
           case "end":
-            return _context52.stop();
+            return _context53.stop();
         }
       }, _callee50);
     })));
     it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee51() {
-      var _mount30, instance, element, now, content;
-      return _regeneratorRuntime.wrap(function _callee51$(_context53) {
-        while (1) switch (_context53.prev = _context53.next) {
+      var _mount29, instance, element, now, content;
+      return _regeneratorRuntime.wrap(function _callee51$(_context54) {
+        while (1) switch (_context54.prev = _context54.next) {
           case 0:
-            _mount30 = mount(MaxMinDemo), instance = _mount30[0], element = _mount30[1];
+            _mount29 = mount(MaxMinDemo), instance = _mount29[0], element = _mount29[1];
             now = dayjs().format('YYYY-MM-DD') + '00:00:00';
             instance.set('toTime', now);
             element.querySelectorAll('.k-datepicker')[2].click();
-            _context53.next = 6;
+            _context54.next = 6;
             return wait();
           case 6:
             content = getElement('.k-datepicker-content');
             content.querySelector('.k-today').click();
-            _context53.next = 10;
+            _context54.next = 10;
             return wait();
           case 10:
             expect(content.querySelectorAll('.k-scroll-select-item:not(.k-disabled)')).have.lengthOf(3);
           case 11:
           case "end":
-            return _context53.stop();
+            return _context54.stop();
         }
       }, _callee51);
     })));
     it('should auto place scrollSeelct to the time that equal to the minDate after selecting the date in datetime picker', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee52() {
-      var _mount31, instance, element, date, time, fromTime, endTimeTrigger, content;
-      return _regeneratorRuntime.wrap(function _callee52$(_context54) {
-        while (1) switch (_context54.prev = _context54.next) {
+      var _mount30, instance, element, date, time, fromTime, endTimeTrigger, content;
+      return _regeneratorRuntime.wrap(function _callee52$(_context55) {
+        while (1) switch (_context55.prev = _context55.next) {
           case 0:
-            _mount31 = mount(MaxMinDemo), instance = _mount31[0], element = _mount31[1];
+            _mount30 = mount(MaxMinDemo), instance = _mount30[0], element = _mount30[1];
             date = dayjs().format('YYYY-MM-DD');
             time = '01:00:00';
             fromTime = date + " " + time;
             instance.set('fromTime', fromTime);
             endTimeTrigger = element.querySelectorAll('.k-datepicker')[3];
             endTimeTrigger.click();
-            _context54.next = 9;
+            _context55.next = 9;
             return wait();
           case 9:
             content = getElement('.k-datepicker-content');
             content.querySelector('.k-today').click();
-            _context54.next = 13;
+            _context55.next = 13;
             return wait();
           case 13:
             content.querySelector('.k-datepicker-footer .k-btn').click();
-            _context54.next = 16;
+            _context55.next = 16;
             return wait();
           case 16:
             expect(instance.get('toTime')).to.eql(date + " " + time);
           case 17:
           case "end":
-            return _context54.stop();
+            return _context55.stop();
         }
       }, _callee52);
     })));
@@ -2000,40 +2038,40 @@ describe('Datepicker', function () {
   describe('Input', function () {
     var globalInput;
     function test(template) {
-      var Demo = /*#__PURE__*/function (_Component2) {
-        _inheritsLoose(Demo, _Component2);
+      var Demo = /*#__PURE__*/function (_Component3) {
+        _inheritsLoose(Demo, _Component3);
         function Demo() {
-          var _context55;
-          var _this2;
-          for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-            args[_key2] = arguments[_key2];
+          var _context56;
+          var _this3;
+          for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+            args[_key3] = arguments[_key3];
           }
-          _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
-          _this2.Datepicker = Datepicker;
-          return _this2;
+          _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context56 = [this]).call(_context56, args)) || this;
+          _this3.Datepicker = Datepicker;
+          return _this3;
         }
         return Demo;
       }(Component);
       Demo.template = "\n                    const {Datepicker} = this;\n                    " + template + "\n                ";
-      var _mount32 = mount(Demo),
-        instance = _mount32[0],
-        element = _mount32[1];
+      var _mount31 = mount(Demo),
+        instance = _mount31[0],
+        element = _mount31[1];
       var input = element.querySelector('.k-input-inner');
       globalInput = input;
       return /*#__PURE__*/function () {
         var _ref49 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee53(value, result) {
-          return _regeneratorRuntime.wrap(function _callee53$(_context56) {
-            while (1) switch (_context56.prev = _context56.next) {
+          return _regeneratorRuntime.wrap(function _callee53$(_context57) {
+            while (1) switch (_context57.prev = _context57.next) {
               case 0:
                 input.value = value;
                 dispatchEvent(input, 'input');
-                _context56.next = 4;
+                _context57.next = 4;
                 return wait();
               case 4:
                 expect(instance.get('value')).to.eql(result);
               case 5:
               case "end":
-                return _context56.stop();
+                return _context57.stop();
             }
           }, _callee53);
         }));
@@ -2044,131 +2082,131 @@ describe('Datepicker', function () {
     }
     it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee54() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee54$(_context57) {
-        while (1) switch (_context57.prev = _context57.next) {
+      return _regeneratorRuntime.wrap(function _callee54$(_context58) {
+        while (1) switch (_context58.prev = _context58.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" max=\"2021-11-11\" min=\"2020-01-01\" />"); // input incorrect value
-            _context57.next = 3;
+            _context58.next = 3;
             return myTest('2020', undefined);
           case 3:
-            _context57.next = 5;
+            _context58.next = 5;
             return myTest('2020-02-02', '2020-02-02');
           case 5:
-            _context57.next = 7;
+            _context58.next = 7;
             return myTest('', null);
           case 7:
-            _context57.next = 9;
+            _context58.next = 9;
             return myTest('1999-01-01', null);
           case 9:
           case "end":
-            return _context57.stop();
+            return _context58.stop();
         }
       }, _callee54);
     })));
     it('multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee55() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee55$(_context58) {
-        while (1) switch (_context58.prev = _context58.next) {
+      return _regeneratorRuntime.wrap(function _callee55$(_context59) {
+        while (1) switch (_context59.prev = _context59.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" multiple />"); // input incorrect value
-            _context58.next = 3;
+            _context59.next = 3;
             return myTest('2', undefined);
           case 3:
-            _context58.next = 5;
+            _context59.next = 5;
             return myTest('2020-02-02', ['2020-02-02']);
           case 5:
-            _context58.next = 7;
+            _context59.next = 7;
             return myTest('2', ['2020-02-02']);
           case 7:
-            _context58.next = 9;
+            _context59.next = 9;
             return myTest('2020-03-03', ['2020-02-02', '2020-03-03']);
           case 9:
           case "end":
-            return _context58.stop();
+            return _context59.stop();
         }
       }, _callee55);
     })));
     it('range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee56() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee56$(_context59) {
-        while (1) switch (_context59.prev = _context59.next) {
+      return _regeneratorRuntime.wrap(function _callee56$(_context60) {
+        while (1) switch (_context60.prev = _context60.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" range max=\"2021-11-11\" min=\"2020-01-01\" />");
-            _context59.next = 3;
+            _context60.next = 3;
             return myTest('2020-03-03', undefined);
           case 3:
-            _context59.next = 5;
+            _context60.next = 5;
             return myTest('2020-03-03~', undefined);
           case 5:
             // input correct value
             dispatchEvent(globalInput, 'click'); // show calendar
-            _context59.next = 8;
+            _context60.next = 8;
             return wait();
           case 8:
-            _context59.next = 10;
+            _context60.next = 10;
             return myTest('2020-03-03~2020-03-04', ['2020-03-03', '2020-03-04']);
           case 10:
             expect(getElement('.k-datepicker-content').querySelector('.k-datepicker-calendar-time-wrapper:nth-child(1)').innerHTML).to.matchSnapshot();
             // clear value
-            _context59.next = 13;
+            _context60.next = 13;
             return myTest('', null);
           case 13:
-            _context59.next = 15;
+            _context60.next = 15;
             return myTest('1999-01-01~2020-03-04', null);
           case 15:
           case "end":
-            return _context59.stop();
+            return _context60.stop();
         }
       }, _callee56);
     })));
     it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee57() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee57$(_context60) {
-        while (1) switch (_context60.prev = _context60.next) {
+      return _regeneratorRuntime.wrap(function _callee57$(_context61) {
+        while (1) switch (_context61.prev = _context61.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" type=\"datetime\" />");
-            _context60.next = 3;
+            _context61.next = 3;
             return myTest('2020-03-03', undefined);
           case 3:
-            _context60.next = 5;
+            _context61.next = 5;
             return myTest('2020-03-03 02:02:02', '2020-03-03 02:02:02');
           case 5:
           case "end":
-            return _context60.stop();
+            return _context61.stop();
         }
       }, _callee57);
     })));
     it('datetime range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee58() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee58$(_context61) {
-        while (1) switch (_context61.prev = _context61.next) {
+      return _regeneratorRuntime.wrap(function _callee58$(_context62) {
+        while (1) switch (_context62.prev = _context62.next) {
           case 0:
             myTest = test('<Datepicker v-model="value" type="datetime" range />');
-            _context61.next = 3;
+            _context62.next = 3;
             return myTest('2020-08-11 00:00:00 ~ 2020-08-11 01:00:00', ['2020-08-11 00:00:00', '2020-08-11 01:00:00']);
           case 3:
-            _context61.next = 5;
+            _context62.next = 5;
             return myTest('2020-08-11 00:01:00 ~ 2020-08-11 01:00:00', ['2020-08-11 00:01:00', '2020-08-11 01:00:00']);
           case 5:
-            _context61.next = 7;
+            _context62.next = 7;
             return myTest('2020-08-11 00:01:00 ~ 2020-08-11 01:01:00', ['2020-08-11 00:01:00', '2020-08-11 01:01:00']);
           case 7:
           case "end":
-            return _context61.stop();
+            return _context62.stop();
         }
       }, _callee58);
     })));
     it('date format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee59() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee59$(_context62) {
-        while (1) switch (_context62.prev = _context62.next) {
+      return _regeneratorRuntime.wrap(function _callee59$(_context63) {
+        while (1) switch (_context63.prev = _context63.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" showFormat=\"YYYY\u5E74M\u6708D\u65E5\" />");
-            _context62.next = 3;
+            _context63.next = 3;
             return myTest('2020年2月19日', '2020-02-19');
           case 3:
           case "end":
-            return _context62.stop();
+            return _context63.stop();
         }
       }, _callee59);
     })));