@king-design/vue 2.1.4 → 2.1.5

package/components/datepicker/index.spec.js

@@ -23,369 +23,448 @@ var month = now.getMonth();
 describe('Datepicker', function () {
   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();
+      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 _callee2() {
       var _mount, instance, element, input, content;
+
       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();
-            _context2.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            content.querySelector('.k-calendar-item').click();
-            expect(instance.get('date')).to.be.string;
-          case 8:
-          case "end":
-            return _context2.stop();
+        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();
+              _context2.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              content.querySelector('.k-calendar-item').click();
+              expect(instance.get('date')).to.be.string;
+
+            case 8:
+            case "end":
+              return _context2.stop();
+          }
         }
       }, _callee2);
     })));
     it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
       var _mount2, instance, element, input, content;
+
       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();
-            _context3.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content'); // change to time panel
-            content.querySelector('.k-calendar-item').click();
-            _context3.next = 9;
-            return wait();
-          case 9:
-            dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
-            content.querySelector('.k-datepicker-footer .k-btn').click();
-            expect(instance.get('datetime1').split(' ')[1]).eql('15:00:00');
-          case 12:
-          case "end":
-            return _context3.stop();
+        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();
+              _context3.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content'); // change to time panel
+
+              content.querySelector('.k-calendar-item').click();
+              _context3.next = 9;
+              return wait();
+
+            case 9:
+              dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
+              content.querySelector('.k-datepicker-footer .k-btn').click();
+              expect(instance.get('datetime1').split(' ')[1]).eql('15:00:00');
+
+            case 12:
+            case "end":
+              return _context3.stop();
+          }
         }
       }, _callee3);
     })));
     it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
       var _mount3, instance, element, _element$querySelecto, yearInput, content, yearDom, nextYearDom;
+
       return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-        while (1) switch (_context4.prev = _context4.next) {
-          case 0:
-            _mount3 = mount(YearMonthDemo), instance = _mount3[0], element = _mount3[1];
-            _element$querySelecto = element.querySelectorAll('.k-input'), yearInput = _element$querySelecto[0]; // year
-            yearInput.click();
-            _context4.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            yearDom = content.querySelector('.k-today');
-            nextYearDom = yearDom.nextElementSibling;
-            nextYearDom.click();
-            expect(instance.get('year') - 1).eql(year);
-          case 10:
-          case "end":
-            return _context4.stop();
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _mount3 = mount(YearMonthDemo), instance = _mount3[0], element = _mount3[1];
+              _element$querySelecto = element.querySelectorAll('.k-input'), yearInput = _element$querySelecto[0]; // year
+
+              yearInput.click();
+              _context4.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              yearDom = content.querySelector('.k-today');
+              nextYearDom = yearDom.nextElementSibling;
+              nextYearDom.click();
+              expect(instance.get('year') - 1).eql(year);
+
+            case 10:
+            case "end":
+              return _context4.stop();
+          }
         }
       }, _callee4);
     })));
     it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
       var _mount4, instance, element, _element$querySelecto2, monthInput, content, monthDom, _instance$get$split, _year, _month;
+
       return _regeneratorRuntime.wrap(function _callee5$(_context5) {
-        while (1) switch (_context5.prev = _context5.next) {
-          case 0:
-            _mount4 = mount(YearMonthDemo), instance = _mount4[0], element = _mount4[1];
-            _element$querySelecto2 = element.querySelectorAll('.k-input'), monthInput = _element$querySelecto2[1]; // month
-            monthInput.click();
-            _context5.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            monthDom = content.querySelector('.k-today');
-            monthDom.click();
-            _instance$get$split = instance.get('month').split('-'), _year = _instance$get$split[0], _month = _instance$get$split[1];
-            expect(+_year).eql(year);
-            expect(+_month - 1).eql(month);
-          case 11:
-          case "end":
-            return _context5.stop();
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              _mount4 = mount(YearMonthDemo), instance = _mount4[0], element = _mount4[1];
+              _element$querySelecto2 = element.querySelectorAll('.k-input'), monthInput = _element$querySelecto2[1]; // month
+
+              monthInput.click();
+              _context5.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              monthDom = content.querySelector('.k-today');
+              monthDom.click();
+              _instance$get$split = instance.get('month').split('-'), _year = _instance$get$split[0], _month = _instance$get$split[1];
+              expect(+_year).eql(year);
+              expect(+_month - 1).eql(month);
+
+            case 11:
+            case "end":
+              return _context5.stop();
+          }
         }
       }, _callee5);
     })));
   });
   describe('Panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
     return _regeneratorRuntime.wrap(function _callee10$(_context10) {
-      while (1) switch (_context10.prev = _context10.next) {
-        case 0:
-          it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
-            var _mount5, instance, element, input, content, _Array$from, prevYear, prevMonth, _Array$from3, nextMonth, nextYear, curDate, _Array$from4, yearDom, monthDom, curDate1, curMonth;
-            return _regeneratorRuntime.wrap(function _callee6$(_context6) {
-              while (1) switch (_context6.prev = _context6.next) {
-                case 0:
-                  _mount5 = mount(BasicDemo), instance = _mount5[0], element = _mount5[1];
-                  input = element.querySelector('.k-input');
-                  input.click();
-                  _context6.next = 5;
-                  return wait();
-                case 5:
-                  content = getElement('.k-datepicker-content');
-                  _Array$from = _Array$from2(content.querySelectorAll('.k-prev')), prevYear = _Array$from[0], prevMonth = _Array$from[1];
-                  _Array$from3 = _Array$from2(content.querySelectorAll('.k-next')), nextMonth = _Array$from3[0], nextYear = _Array$from3[1]; // click prev year twice
-                  dispatchEvent(prevYear, 'click');
-                  dispatchEvent(prevYear, 'click');
-                  // click prev month twice
-                  dispatchEvent(prevMonth, 'click');
-                  dispatchEvent(prevMonth, 'click');
-                  // click next month once
-                  dispatchEvent(nextMonth, 'click');
-                  // click next year once
-                  dispatchEvent(nextYear, 'click');
-                  _context6.next = 16;
-                  return wait();
-                case 16:
-                  // select the middle date
-                  dispatchEvent(content.querySelectorAll('.k-calendar-item')[17], 'click');
-                  curDate = new Date(instance.get('date'));
-                  curDate.setFullYear(curDate.getFullYear() + 1);
-                  curDate.setMonth(curDate.getMonth() + 1);
-                  expect(curDate.getFullYear()).be.eql(year);
-                  expect(curDate.getMonth()).be.eql(month);
-                  // change year and month in year/month panel
-                  input.click();
-                  _context6.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();
-                  _context6.next = 30;
-                  return wait();
-                case 30:
-                  content.querySelector('.k-today').click();
-                  _context6.next = 33;
-                  return wait();
-                case 33:
-                  content.querySelector('.k-today').click();
-                  _context6.next = 36;
-                  return wait();
-                case 36:
-                  // select the middle date
-                  dispatchEvent(content.querySelectorAll('.k-calendar-item')[17], 'click');
-                  curDate1 = new Date(instance.get('date'));
-                  curMonth = curDate1.getMonth();
-                  expect(curMonth).be.eql(month);
-                  expect(curDate1.getFullYear()).be.eql(year);
-                case 41:
-                case "end":
-                  return _context6.stop();
-              }
-            }, _callee6);
-          })));
-          it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
-            var _mount6, 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 _callee7$(_context7) {
-              while (1) switch (_context7.prev = _context7.next) {
-                case 0:
-                  _mount6 = mount(RangeDemo), instance = _mount6[0], element = _mount6[1];
-                  select = element.querySelector('.k-datepicker');
-                  select.click();
-                  _context7.next = 5;
-                  return wait();
-                case 5:
-                  content = getElement('.k-datepicker-content');
-                  _content$querySelecto = content.querySelectorAll('.k-datepicker-calendar-wrapper'), panel1 = _content$querySelecto[0], panel2 = _content$querySelecto[1];
-                  _panel1$querySelector = panel1.querySelectorAll('.k-next'), nextMonth = _panel1$querySelector[0], nextYear = _panel1$querySelector[1];
-                  _content$querySelecto2 = content.querySelectorAll('.k-month-values'), monthValues1 = _content$querySelecto2[0], monthValues2 = _content$querySelecto2[1];
-                  nextMonth.click();
-                  monthStart = (month + 1) % 12 + 1;
-                  yearStart = year + Math.floor((month + 1) / 12);
-                  monthEnd = (month + 2) % 12 + 1;
-                  yearEnd = year + Math.floor((month + 2) / 12);
-                  _context7.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();
-                  _context7.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();
-                  _context7.next = 27;
-                  return wait();
-                case 27:
-                  expect(monthValues1.textContent).to.eql(yearStart + "\u5E74" + monthStart + "\u6708");
-                  expect(monthValues2.textContent).to.eql(yearEnd + "\u5E74" + monthEnd + "\u6708");
-                  // year panel
-                  dispatchEvent(monthValues1.firstElementChild, 'click');
-                  dispatchEvent(monthValues2.firstElementChild, 'click');
-                  _context7.next = 33;
-                  return wait();
-                case 33:
-                  firstDecadeStart = Math.floor(yearStart / 10) * 10;
-                  secondDecadeStart = Math.floor(yearEnd / 10) * 10;
-                  expect(monthValues1.textContent).to.eql(firstDecadeStart + "\u5E74 - " + (firstDecadeStart + 9) + "\u5E74");
-                  expect(monthValues1.textContent).to.eql(secondDecadeStart + "\u5E74 - " + (secondDecadeStart + 9) + "\u5E74");
-                  nextYear.click();
-                  _context7.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 _context7.stop();
-              }
-            }, _callee7);
-          })));
-          it('range year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
-            var _mount7, instance, element, _element$querySelecto3, select, content, _content$querySelecto3, panel1, panel2, _panel1$querySelector2, next, _panel2$querySelector2, prev, _content$querySelecto4, label1, label2;
-            return _regeneratorRuntime.wrap(function _callee8$(_context8) {
-              while (1) switch (_context8.prev = _context8.next) {
-                case 0:
-                  _mount7 = mount(RangeDemo), instance = _mount7[0], element = _mount7[1];
-                  _element$querySelecto3 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto3[2];
-                  select.click();
-                  _context8.next = 5;
-                  return wait();
-                case 5:
-                  content = getElement('.k-datepicker-content');
-                  _content$querySelecto3 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), panel1 = _content$querySelecto3[0], panel2 = _content$querySelecto3[1];
-                  _panel1$querySelector2 = panel1.querySelectorAll('.k-next'), next = _panel1$querySelector2[0];
-                  _panel2$querySelector2 = panel2.querySelectorAll('.k-prev'), prev = _panel2$querySelector2[0];
-                  _content$querySelecto4 = content.querySelectorAll('.k-month-values'), label1 = _content$querySelecto4[0], label2 = _content$querySelecto4[1];
-                  expect(label1.textContent).to.eql(startYear + "\u5E74 - " + (startYear + 9) + "\u5E74");
-                  expect(label2.textContent).to.eql(startYear + 10 + "\u5E74 - " + (startYear + 19) + "\u5E74");
-                  next.click();
-                  _context8.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();
-                  _context8.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 _context8.stop();
-              }
-            }, _callee8);
-          })));
-          it('range month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
-            var _mount8, instance, element, _element$querySelecto4, select, content, _content$querySelecto5, panel1, panel2, _panel1$querySelector3, next, _panel2$querySelector3, prev, _content$querySelecto6, label1, label2;
-            return _regeneratorRuntime.wrap(function _callee9$(_context9) {
-              while (1) switch (_context9.prev = _context9.next) {
-                case 0:
-                  _mount8 = mount(RangeDemo), instance = _mount8[0], element = _mount8[1];
-                  _element$querySelecto4 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto4[3];
-                  select.click();
-                  _context9.next = 5;
-                  return wait();
-                case 5:
-                  content = getElement('.k-datepicker-content');
-                  _content$querySelecto5 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), panel1 = _content$querySelecto5[0], panel2 = _content$querySelecto5[1];
-                  _panel1$querySelector3 = panel1.querySelectorAll('.k-next'), next = _panel1$querySelector3[0];
-                  _panel2$querySelector3 = panel2.querySelectorAll('.k-prev'), prev = _panel2$querySelector3[0];
-                  _content$querySelecto6 = content.querySelectorAll('.k-month-values'), label1 = _content$querySelecto6[0], label2 = _content$querySelecto6[1];
-                  expect(label1.textContent).to.eql(year + "\u5E74" + (month + 1) + "\u6708");
-                  expect(label2.textContent).to.eql(year + 1 + "\u5E74" + (month + 1) + "\u6708");
-                  next.click();
-                  _context9.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();
-                  _context9.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 _context9.stop();
-              }
-            }, _callee9);
-          })));
-        case 4:
-        case "end":
-          return _context10.stop();
+      while (1) {
+        switch (_context10.prev = _context10.next) {
+          case 0:
+            it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+              var _mount5, instance, element, input, content, _Array$from, prevYear, prevMonth, _Array$from3, nextMonth, nextYear, curDate, _Array$from4, yearDom, monthDom, curDate1, curMonth;
+
+              return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+                while (1) {
+                  switch (_context6.prev = _context6.next) {
+                    case 0:
+                      _mount5 = mount(BasicDemo), instance = _mount5[0], element = _mount5[1];
+                      input = element.querySelector('.k-input');
+                      input.click();
+                      _context6.next = 5;
+                      return wait();
+
+                    case 5:
+                      content = getElement('.k-datepicker-content');
+                      _Array$from = _Array$from2(content.querySelectorAll('.k-prev')), prevYear = _Array$from[0], prevMonth = _Array$from[1];
+                      _Array$from3 = _Array$from2(content.querySelectorAll('.k-next')), nextMonth = _Array$from3[0], nextYear = _Array$from3[1]; // click prev year twice
+
+                      dispatchEvent(prevYear, 'click');
+                      dispatchEvent(prevYear, 'click'); // click prev month twice
+
+                      dispatchEvent(prevMonth, 'click');
+                      dispatchEvent(prevMonth, 'click'); // click next month once
+
+                      dispatchEvent(nextMonth, 'click'); // click next year once
+
+                      dispatchEvent(nextYear, 'click');
+                      _context6.next = 16;
+                      return wait();
+
+                    case 16:
+                      // select the middle date
+                      dispatchEvent(content.querySelectorAll('.k-calendar-item')[17], 'click');
+                      curDate = new Date(instance.get('date'));
+                      curDate.setFullYear(curDate.getFullYear() + 1);
+                      curDate.setMonth(curDate.getMonth() + 1);
+                      expect(curDate.getFullYear()).be.eql(year);
+                      expect(curDate.getMonth()).be.eql(month); // change year and month in year/month panel
+
+                      input.click();
+                      _context6.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();
+                      _context6.next = 30;
+                      return wait();
+
+                    case 30:
+                      content.querySelector('.k-today').click();
+                      _context6.next = 33;
+                      return wait();
+
+                    case 33:
+                      content.querySelector('.k-today').click();
+                      _context6.next = 36;
+                      return wait();
+
+                    case 36:
+                      // select the middle date
+                      dispatchEvent(content.querySelectorAll('.k-calendar-item')[17], 'click');
+                      curDate1 = new Date(instance.get('date'));
+                      curMonth = curDate1.getMonth();
+                      expect(curMonth).be.eql(month);
+                      expect(curDate1.getFullYear()).be.eql(year);
+
+                    case 41:
+                    case "end":
+                      return _context6.stop();
+                  }
+                }
+              }, _callee6);
+            })));
+            it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+              var _mount6, 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 _callee7$(_context7) {
+                while (1) {
+                  switch (_context7.prev = _context7.next) {
+                    case 0:
+                      _mount6 = mount(RangeDemo), instance = _mount6[0], element = _mount6[1];
+                      select = element.querySelector('.k-datepicker');
+                      select.click();
+                      _context7.next = 5;
+                      return wait();
+
+                    case 5:
+                      content = getElement('.k-datepicker-content');
+                      _content$querySelecto = content.querySelectorAll('.k-datepicker-calendar-wrapper'), panel1 = _content$querySelecto[0], panel2 = _content$querySelecto[1];
+                      _panel1$querySelector = panel1.querySelectorAll('.k-next'), nextMonth = _panel1$querySelector[0], nextYear = _panel1$querySelector[1];
+                      _content$querySelecto2 = content.querySelectorAll('.k-month-values'), monthValues1 = _content$querySelecto2[0], monthValues2 = _content$querySelecto2[1];
+                      nextMonth.click();
+                      monthStart = (month + 1) % 12 + 1;
+                      yearStart = year + Math.floor((month + 1) / 12);
+                      monthEnd = (month + 2) % 12 + 1;
+                      yearEnd = year + Math.floor((month + 2) / 12);
+                      _context7.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();
+                      _context7.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();
+                      _context7.next = 27;
+                      return wait();
+
+                    case 27:
+                      expect(monthValues1.textContent).to.eql(yearStart + "\u5E74" + monthStart + "\u6708");
+                      expect(monthValues2.textContent).to.eql(yearEnd + "\u5E74" + monthEnd + "\u6708"); // year panel
+
+                      dispatchEvent(monthValues1.firstElementChild, 'click');
+                      dispatchEvent(monthValues2.firstElementChild, 'click');
+                      _context7.next = 33;
+                      return wait();
+
+                    case 33:
+                      firstDecadeStart = Math.floor(yearStart / 10) * 10;
+                      secondDecadeStart = Math.floor(yearEnd / 10) * 10;
+                      expect(monthValues1.textContent).to.eql(firstDecadeStart + "\u5E74 - " + (firstDecadeStart + 9) + "\u5E74");
+                      expect(monthValues1.textContent).to.eql(secondDecadeStart + "\u5E74 - " + (secondDecadeStart + 9) + "\u5E74");
+                      nextYear.click();
+                      _context7.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 _context7.stop();
+                  }
+                }
+              }, _callee7);
+            })));
+            it('range year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+              var _mount7, instance, element, _element$querySelecto3, select, content, _content$querySelecto3, panel1, panel2, _panel1$querySelector2, next, _panel2$querySelector2, prev, _content$querySelecto4, label1, label2;
+
+              return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+                while (1) {
+                  switch (_context8.prev = _context8.next) {
+                    case 0:
+                      _mount7 = mount(RangeDemo), instance = _mount7[0], element = _mount7[1];
+                      _element$querySelecto3 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto3[2];
+                      select.click();
+                      _context8.next = 5;
+                      return wait();
+
+                    case 5:
+                      content = getElement('.k-datepicker-content');
+                      _content$querySelecto3 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), panel1 = _content$querySelecto3[0], panel2 = _content$querySelecto3[1];
+                      _panel1$querySelector2 = panel1.querySelectorAll('.k-next'), next = _panel1$querySelector2[0];
+                      _panel2$querySelector2 = panel2.querySelectorAll('.k-prev'), prev = _panel2$querySelector2[0];
+                      _content$querySelecto4 = content.querySelectorAll('.k-month-values'), label1 = _content$querySelecto4[0], label2 = _content$querySelecto4[1];
+                      expect(label1.textContent).to.eql(startYear + "\u5E74 - " + (startYear + 9) + "\u5E74");
+                      expect(label2.textContent).to.eql(startYear + 10 + "\u5E74 - " + (startYear + 19) + "\u5E74");
+                      next.click();
+                      _context8.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();
+                      _context8.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 _context8.stop();
+                  }
+                }
+              }, _callee8);
+            })));
+            it('range month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+              var _mount8, instance, element, _element$querySelecto4, select, content, _content$querySelecto5, panel1, panel2, _panel1$querySelector3, next, _panel2$querySelector3, prev, _content$querySelecto6, label1, label2;
+
+              return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+                while (1) {
+                  switch (_context9.prev = _context9.next) {
+                    case 0:
+                      _mount8 = mount(RangeDemo), instance = _mount8[0], element = _mount8[1];
+                      _element$querySelecto4 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto4[3];
+                      select.click();
+                      _context9.next = 5;
+                      return wait();
+
+                    case 5:
+                      content = getElement('.k-datepicker-content');
+                      _content$querySelecto5 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), panel1 = _content$querySelecto5[0], panel2 = _content$querySelecto5[1];
+                      _panel1$querySelector3 = panel1.querySelectorAll('.k-next'), next = _panel1$querySelector3[0];
+                      _panel2$querySelector3 = panel2.querySelectorAll('.k-prev'), prev = _panel2$querySelector3[0];
+                      _content$querySelecto6 = content.querySelectorAll('.k-month-values'), label1 = _content$querySelecto6[0], label2 = _content$querySelecto6[1];
+                      expect(label1.textContent).to.eql(year + "\u5E74" + (month + 1) + "\u6708");
+                      expect(label2.textContent).to.eql(year + 1 + "\u5E74" + (month + 1) + "\u6708");
+                      next.click();
+                      _context9.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();
+                      _context9.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 _context9.stop();
+                  }
+                }
+              }, _callee9);
+            })));
+
+          case 4:
+          case "end":
+            return _context10.stop();
+        }
       }
     }, _callee10);
   })));
   describe('Clear', function () {
     it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
       var _mount9, instance, element;
+
       return _regeneratorRuntime.wrap(function _callee11$(_context11) {
-        while (1) switch (_context11.prev = _context11.next) {
-          case 0:
-            _mount9 = mount(ClearableDemo), instance = _mount9[0], element = _mount9[1];
-            instance.set('date', '2018-03-04');
-            _context11.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 _context11.stop();
+        while (1) {
+          switch (_context11.prev = _context11.next) {
+            case 0:
+              _mount9 = mount(ClearableDemo), instance = _mount9[0], element = _mount9[1];
+              instance.set('date', '2018-03-04');
+              _context11.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 _context11.stop();
+          }
         }
       }, _callee11);
     })));
     it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
       var _mount10, instance, element, input, content;
+
       return _regeneratorRuntime.wrap(function _callee12$(_context12) {
-        while (1) switch (_context12.prev = _context12.next) {
-          case 0:
-            _mount10 = mount(DatetimeDemo), instance = _mount10[0], element = _mount10[1];
-            input = element.querySelector('.k-input');
-            input.click();
-            _context12.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content'); // change to time panel
-            content.querySelector('.k-calendar-item').click();
-            _context12.next = 9;
-            return wait();
-          case 9:
-            content.querySelector('.k-datepicker-footer .k-btn').click();
-            // clear the value
-            _context12.next = 12;
-            return wait();
-          case 12:
-            expect(instance.get('datetime1')).to.be.string;
-            dispatchEvent(element.querySelector('.k-select-clear'), 'click');
-            expect(instance.get('datetime1')).be.eql(null);
-            // set value to empty string should clear datetime
-            input.click();
-            _context12.next = 18;
-            return wait();
-          case 18:
-            content.querySelector('.k-calendar-item').click();
-            instance.set('datetime1', '');
-            expect(instance.get('datetime1')).to.eql('');
-          case 21:
-          case "end":
-            return _context12.stop();
+        while (1) {
+          switch (_context12.prev = _context12.next) {
+            case 0:
+              _mount10 = mount(DatetimeDemo), instance = _mount10[0], element = _mount10[1];
+              input = element.querySelector('.k-input');
+              input.click();
+              _context12.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content'); // change to time panel
+
+              content.querySelector('.k-calendar-item').click();
+              _context12.next = 9;
+              return wait();
+
+            case 9:
+              content.querySelector('.k-datepicker-footer .k-btn').click(); // clear the value
+
+              _context12.next = 12;
+              return wait();
+
+            case 12:
+              expect(instance.get('datetime1')).to.be.string;
+              dispatchEvent(element.querySelector('.k-select-clear'), 'click');
+              expect(instance.get('datetime1')).be.eql(null); // set value to empty string should clear datetime
+
+              input.click();
+              _context12.next = 18;
+              return wait();
+
+            case 18:
+              content.querySelector('.k-calendar-item').click();
+              instance.set('datetime1', '');
+              expect(instance.get('datetime1')).to.eql('');
+
+            case 21:
+            case "end":
+              return _context12.stop();
+          }
         }
       }, _callee12);
     })));
@@ -393,295 +472,360 @@ describe('Datepicker', function () {
   describe('Multiple', function () {
     it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
       var _mount11, instance, element, select, content, items, close;
+
       return _regeneratorRuntime.wrap(function _callee13$(_context13) {
-        while (1) switch (_context13.prev = _context13.next) {
-          case 0:
-            _mount11 = mount(MultipleDemo), instance = _mount11[0], element = _mount11[1];
-            select = element.querySelector('.k-datepicker');
-            dispatchEvent(select, 'click');
-            _context13.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            items = content.querySelectorAll('.k-calendar-item');
-            dispatchEvent(items[17], 'click');
-            dispatchEvent(items[18], 'click');
-            expect(instance.get('date')).have.lengthOf(2);
-            dispatchEvent(items[18], 'click');
-            expect(instance.get('date')).have.lengthOf(1);
-            _context13.next = 14;
-            return wait();
-          case 14:
-            // remove specified item
-            close = element.querySelector('.k-select-close');
-            close.click();
-            expect(instance.get('date')).have.lengthOf(0);
-            _context13.next = 19;
-            return wait();
-          case 19:
-            dispatchEvent(items[17], 'click');
-            expect(instance.get('date')).have.lengthOf(1);
-            _context13.next = 23;
-            return wait();
-          case 23:
-            // clear
-            dispatchEvent(element.querySelector('.k-select-clear'), 'click');
-            expect(instance.get('date')).have.lengthOf(0);
-          case 25:
-          case "end":
-            return _context13.stop();
+        while (1) {
+          switch (_context13.prev = _context13.next) {
+            case 0:
+              _mount11 = mount(MultipleDemo), instance = _mount11[0], element = _mount11[1];
+              select = element.querySelector('.k-datepicker');
+              dispatchEvent(select, 'click');
+              _context13.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              items = content.querySelectorAll('.k-calendar-item');
+              dispatchEvent(items[17], 'click');
+              dispatchEvent(items[18], 'click');
+              expect(instance.get('date')).have.lengthOf(2);
+              dispatchEvent(items[18], 'click');
+              expect(instance.get('date')).have.lengthOf(1);
+              _context13.next = 14;
+              return wait();
+
+            case 14:
+              // remove specified item
+              close = element.querySelector('.k-select-close');
+              close.click();
+              expect(instance.get('date')).have.lengthOf(0);
+              _context13.next = 19;
+              return wait();
+
+            case 19:
+              dispatchEvent(items[17], 'click');
+              expect(instance.get('date')).have.lengthOf(1);
+              _context13.next = 23;
+              return wait();
+
+            case 23:
+              // clear
+              dispatchEvent(element.querySelector('.k-select-clear'), 'click');
+              expect(instance.get('date')).have.lengthOf(0);
+
+            case 25:
+            case "end":
+              return _context13.stop();
+          }
         }
       }, _callee13);
     })));
     it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
       var _mount12, instance, element, _element$querySelecto5, select, content;
+
       return _regeneratorRuntime.wrap(function _callee14$(_context14) {
-        while (1) switch (_context14.prev = _context14.next) {
-          case 0:
-            _mount12 = mount(MultipleDemo), instance = _mount12[0], element = _mount12[1];
-            _element$querySelecto5 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto5[1];
-            dispatchEvent(select, 'click');
-            _context14.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
-            _context14.next = 9;
-            return wait();
-          case 9:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.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');
-            _context14.next = 16;
-            return wait();
-          case 16:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.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');
-            _context14.next = 23;
-            return wait();
-          case 23:
-            dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
-            _context14.next = 26;
-            return wait();
-          case 26:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.next = 29;
-            return wait();
-          case 29:
-            expect(instance.get('datetime')).have.lengthOf(2);
-            // change to time panel, and remove the selections, then click confirm ok
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
-            _context14.next = 33;
-            return wait();
-          case 33:
-            instance.set('datetime', []);
-            _context14.next = 36;
-            return wait();
-          case 36:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.next = 39;
-            return wait();
-          case 39:
-            expect(instance.get('datetime')).have.lengthOf(1);
-          case 40:
-          case "end":
-            return _context14.stop();
+        while (1) {
+          switch (_context14.prev = _context14.next) {
+            case 0:
+              _mount12 = mount(MultipleDemo), instance = _mount12[0], element = _mount12[1];
+              _element$querySelecto5 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto5[1];
+              dispatchEvent(select, 'click');
+              _context14.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
+              _context14.next = 9;
+              return wait();
+
+            case 9:
+              dispatchEvent(content.querySelector('.k-btn'), 'click');
+              _context14.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');
+              _context14.next = 16;
+              return wait();
+
+            case 16:
+              dispatchEvent(content.querySelector('.k-btn'), 'click');
+              _context14.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');
+              _context14.next = 23;
+              return wait();
+
+            case 23:
+              dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
+              _context14.next = 26;
+              return wait();
+
+            case 26:
+              dispatchEvent(content.querySelector('.k-btn'), 'click');
+              _context14.next = 29;
+              return wait();
+
+            case 29:
+              expect(instance.get('datetime')).have.lengthOf(2); // change to time panel, and remove the selections, then click confirm ok
+
+              dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
+              _context14.next = 33;
+              return wait();
+
+            case 33:
+              instance.set('datetime', []);
+              _context14.next = 36;
+              return wait();
+
+            case 36:
+              dispatchEvent(content.querySelector('.k-btn'), 'click');
+              _context14.next = 39;
+              return wait();
+
+            case 39:
+              expect(instance.get('datetime')).have.lengthOf(1);
+
+            case 40:
+            case "end":
+              return _context14.stop();
+          }
         }
       }, _callee14);
     })));
     it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
       var _mount13, instance, element, _element$querySelecto6, select, content;
+
       return _regeneratorRuntime.wrap(function _callee15$(_context15) {
-        while (1) switch (_context15.prev = _context15.next) {
-          case 0:
-            _mount13 = mount(MultipleDemo), instance = _mount13[0], element = _mount13[1];
-            _element$querySelecto6 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto6[2];
-            dispatchEvent(select, 'click');
-            _context15.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context15.next = 9;
-            return wait();
-          case 9:
-            expect(instance.get('year')).have.lengthOf(1);
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(7)'), 'click');
-            _context15.next = 13;
-            return wait();
-          case 13:
-            expect(instance.get('year')).have.lengthOf(2);
-            instance.set('year', []);
-            _context15.next = 17;
-            return wait();
-          case 17:
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context15.next = 20;
-            return wait();
-          case 20:
-            expect(instance.get('year')).have.lengthOf(1);
-          case 21:
-          case "end":
-            return _context15.stop();
+        while (1) {
+          switch (_context15.prev = _context15.next) {
+            case 0:
+              _mount13 = mount(MultipleDemo), instance = _mount13[0], element = _mount13[1];
+              _element$querySelecto6 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto6[2];
+              dispatchEvent(select, 'click');
+              _context15.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
+              _context15.next = 9;
+              return wait();
+
+            case 9:
+              expect(instance.get('year')).have.lengthOf(1);
+              dispatchEvent(content.querySelector('.k-calendar-item:nth-child(7)'), 'click');
+              _context15.next = 13;
+              return wait();
+
+            case 13:
+              expect(instance.get('year')).have.lengthOf(2);
+              instance.set('year', []);
+              _context15.next = 17;
+              return wait();
+
+            case 17:
+              dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
+              _context15.next = 20;
+              return wait();
+
+            case 20:
+              expect(instance.get('year')).have.lengthOf(1);
+
+            case 21:
+            case "end":
+              return _context15.stop();
+          }
         }
       }, _callee15);
     })));
     it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
       var _mount14, instance, element, _element$querySelecto7, select, content;
+
       return _regeneratorRuntime.wrap(function _callee16$(_context16) {
-        while (1) switch (_context16.prev = _context16.next) {
-          case 0:
-            _mount14 = mount(MultipleDemo), instance = _mount14[0], element = _mount14[1];
-            _element$querySelecto7 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto7[3];
-            dispatchEvent(select, 'click');
-            _context16.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context16.next = 9;
-            return wait();
-          case 9:
-            expect(instance.get('month')).have.lengthOf(1);
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(7)'), 'click');
-            _context16.next = 13;
-            return wait();
-          case 13:
-            expect(instance.get('month')).have.lengthOf(2);
-            instance.set('month', []);
-            _context16.next = 17;
-            return wait();
-          case 17:
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context16.next = 20;
-            return wait();
-          case 20:
-            expect(instance.get('month')).have.lengthOf(1);
-          case 21:
-          case "end":
-            return _context16.stop();
+        while (1) {
+          switch (_context16.prev = _context16.next) {
+            case 0:
+              _mount14 = mount(MultipleDemo), instance = _mount14[0], element = _mount14[1];
+              _element$querySelecto7 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto7[3];
+              dispatchEvent(select, 'click');
+              _context16.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
+              _context16.next = 9;
+              return wait();
+
+            case 9:
+              expect(instance.get('month')).have.lengthOf(1);
+              dispatchEvent(content.querySelector('.k-calendar-item:nth-child(7)'), 'click');
+              _context16.next = 13;
+              return wait();
+
+            case 13:
+              expect(instance.get('month')).have.lengthOf(2);
+              instance.set('month', []);
+              _context16.next = 17;
+              return wait();
+
+            case 17:
+              dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
+              _context16.next = 20;
+              return wait();
+
+            case 20:
+              expect(instance.get('month')).have.lengthOf(1);
+
+            case 21:
+            case "end":
+              return _context16.stop();
+          }
         }
       }, _callee16);
     })));
     it('date range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
       var _mount15, instance, element, _element$querySelecto8, select, content, _content$querySelecto7, calendar1, calendar2, first, second;
+
       return _regeneratorRuntime.wrap(function _callee17$(_context17) {
-        while (1) switch (_context17.prev = _context17.next) {
-          case 0:
-            _mount15 = mount(MultipleDemo), instance = _mount15[0], element = _mount15[1];
-            _element$querySelecto8 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto8[4];
-            dispatchEvent(select, 'click');
-            _context17.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            _content$querySelecto7 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto7[0], calendar2 = _content$querySelecto7[1];
-            first = calendar1.querySelectorAll('.k-calendar-item')[17];
-            second = calendar2.querySelectorAll('.k-calendar-item')[17];
-            first.click();
-            second.click();
-            _context17.next = 13;
-            return wait();
-          case 13:
-            expect(instance.get('dateRange')).have.lengthOf(1);
-            dispatchEvent(first.nextElementSibling, 'click');
-            dispatchEvent(second.nextElementSibling, 'click');
-            _context17.next = 18;
-            return wait();
-          case 18:
-            expect(instance.get('dateRange')).have.lengthOf(2);
-            first.click();
-            second.click();
-            _context17.next = 23;
-            return wait();
-          case 23:
-            expect(instance.get('dateRange')).have.lengthOf(1);
-            instance.set('dateRange', []);
-            _context17.next = 27;
-            return wait();
-          case 27:
-            first.click();
-            second.click();
-            _context17.next = 31;
-            return wait();
-          case 31:
-            expect(instance.get('dateRange')).have.lengthOf(1);
-          case 32:
-          case "end":
-            return _context17.stop();
+        while (1) {
+          switch (_context17.prev = _context17.next) {
+            case 0:
+              _mount15 = mount(MultipleDemo), instance = _mount15[0], element = _mount15[1];
+              _element$querySelecto8 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto8[4];
+              dispatchEvent(select, 'click');
+              _context17.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              _content$querySelecto7 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto7[0], calendar2 = _content$querySelecto7[1];
+              first = calendar1.querySelectorAll('.k-calendar-item')[17];
+              second = calendar2.querySelectorAll('.k-calendar-item')[17];
+              first.click();
+              second.click();
+              _context17.next = 13;
+              return wait();
+
+            case 13:
+              expect(instance.get('dateRange')).have.lengthOf(1);
+              dispatchEvent(first.nextElementSibling, 'click');
+              dispatchEvent(second.nextElementSibling, 'click');
+              _context17.next = 18;
+              return wait();
+
+            case 18:
+              expect(instance.get('dateRange')).have.lengthOf(2);
+              first.click();
+              second.click();
+              _context17.next = 23;
+              return wait();
+
+            case 23:
+              expect(instance.get('dateRange')).have.lengthOf(1);
+              instance.set('dateRange', []);
+              _context17.next = 27;
+              return wait();
+
+            case 27:
+              first.click();
+              second.click();
+              _context17.next = 31;
+              return wait();
+
+            case 31:
+              expect(instance.get('dateRange')).have.lengthOf(1);
+
+            case 32:
+            case "end":
+              return _context17.stop();
+          }
         }
       }, _callee17);
     })));
     it('datetime range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
       var _mount16, instance, element, _element$querySelecto9, select, content, _content$querySelecto8, calendar1, calendar2;
+
       return _regeneratorRuntime.wrap(function _callee18$(_context18) {
-        while (1) switch (_context18.prev = _context18.next) {
-          case 0:
-            _mount16 = mount(MultipleDemo), instance = _mount16[0], element = _mount16[1];
-            _element$querySelecto9 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto9[5];
-            dispatchEvent(select, 'click');
-            _context18.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            _content$querySelecto8 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto8[0], calendar2 = _content$querySelecto8[1];
-            calendar1.querySelectorAll('.k-calendar-item')[17].click();
-            calendar2.querySelectorAll('.k-calendar-item')[17].click();
-            _context18.next = 11;
-            return wait();
-          case 11:
-            content.querySelector('.k-btn').click();
-            _context18.next = 14;
-            return wait();
-          case 14:
-            expect(instance.get('datetimeRange')).have.lengthOf(1);
-            calendar1.querySelectorAll('.k-calendar-item')[18].click();
-            calendar2.querySelectorAll('.k-calendar-item')[18].click();
-            _context18.next = 19;
-            return wait();
-          case 19:
-            content.querySelector('.k-btn').click();
-            _context18.next = 22;
-            return wait();
-          case 22:
-            expect(instance.get('datetimeRange')).have.lengthOf(2);
-            // selecting the same date time will do nothing
-            calendar1.querySelectorAll('.k-calendar-item')[17].click();
-            calendar2.querySelectorAll('.k-calendar-item')[17].click();
-            _context18.next = 27;
-            return wait();
-          case 27:
-            content.querySelector('.k-btn').click();
-            _context18.next = 30;
-            return wait();
-          case 30:
-            expect(instance.get('datetimeRange')).have.lengthOf(2);
-            instance.set('datetimeRange', []);
-            _context18.next = 34;
-            return wait();
-          case 34:
-            calendar1.querySelectorAll('.k-calendar-item')[17].click();
-            calendar2.querySelectorAll('.k-calendar-item')[17].click();
-            _context18.next = 38;
-            return wait();
-          case 38:
-            content.querySelector('.k-btn').click();
-            _context18.next = 41;
-            return wait();
-          case 41:
-            expect(instance.get('datetimeRange')).have.lengthOf(1);
-          case 42:
-          case "end":
-            return _context18.stop();
+        while (1) {
+          switch (_context18.prev = _context18.next) {
+            case 0:
+              _mount16 = mount(MultipleDemo), instance = _mount16[0], element = _mount16[1];
+              _element$querySelecto9 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto9[5];
+              dispatchEvent(select, 'click');
+              _context18.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              _content$querySelecto8 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto8[0], calendar2 = _content$querySelecto8[1];
+              calendar1.querySelectorAll('.k-calendar-item')[17].click();
+              calendar2.querySelectorAll('.k-calendar-item')[17].click();
+              _context18.next = 11;
+              return wait();
+
+            case 11:
+              content.querySelector('.k-btn').click();
+              _context18.next = 14;
+              return wait();
+
+            case 14:
+              expect(instance.get('datetimeRange')).have.lengthOf(1);
+              calendar1.querySelectorAll('.k-calendar-item')[18].click();
+              calendar2.querySelectorAll('.k-calendar-item')[18].click();
+              _context18.next = 19;
+              return wait();
+
+            case 19:
+              content.querySelector('.k-btn').click();
+              _context18.next = 22;
+              return wait();
+
+            case 22:
+              expect(instance.get('datetimeRange')).have.lengthOf(2); // selecting the same date time will do nothing
+
+              calendar1.querySelectorAll('.k-calendar-item')[17].click();
+              calendar2.querySelectorAll('.k-calendar-item')[17].click();
+              _context18.next = 27;
+              return wait();
+
+            case 27:
+              content.querySelector('.k-btn').click();
+              _context18.next = 30;
+              return wait();
+
+            case 30:
+              expect(instance.get('datetimeRange')).have.lengthOf(2);
+              instance.set('datetimeRange', []);
+              _context18.next = 34;
+              return wait();
+
+            case 34:
+              calendar1.querySelectorAll('.k-calendar-item')[17].click();
+              calendar2.querySelectorAll('.k-calendar-item')[17].click();
+              _context18.next = 38;
+              return wait();
+
+            case 38:
+              content.querySelector('.k-btn').click();
+              _context18.next = 41;
+              return wait();
+
+            case 41:
+              expect(instance.get('datetimeRange')).have.lengthOf(1);
+
+            case 42:
+            case "end":
+              return _context18.stop();
+          }
         }
       }, _callee18);
     })));
@@ -689,177 +833,213 @@ describe('Datepicker', function () {
   describe('Range', function () {
     it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
       var _mount17, instance, element, select, content, first, value, value1, second;
+
       return _regeneratorRuntime.wrap(function _callee19$(_context19) {
-        while (1) switch (_context19.prev = _context19.next) {
-          case 0:
-            _mount17 = mount(RangeDemo), instance = _mount17[0], element = _mount17[1]; // date
-            select = element.querySelector('.k-datepicker');
-            select.click();
-            _context19.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content'); // select the middle date
-            first = content.querySelector('.k-calendar-item:nth-child(18)');
-            first.click();
-            _context19.next = 10;
-            return wait();
-          case 10:
-            expect(instance.get('date')).to.be.null;
-            // hover status
-            dispatchEvent(first.nextElementSibling.nextElementSibling, 'mouseenter');
-            _context19.next = 14;
-            return wait();
-          case 14:
-            expect(first.nextElementSibling.classList.contains('k-in-range')).to.be.true;
-            dispatchEvent(first.previousElementSibling.previousElementSibling, 'mouseenter');
-            _context19.next = 18;
-            return wait();
-          case 18:
-            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');
-            _context19.next = 23;
-            return wait();
-          case 23:
-            value = instance.get('date');
-            expect(value).have.lengthOf(2);
-            expect(value[0] < value[1]).to.be.true;
-            // select the same date
-            select.click();
-            _context19.next = 29;
-            return wait();
-          case 29:
-            // select the middle date
-            first.click();
-            first.click();
-            _context19.next = 33;
-            return wait();
-          case 33:
-            value1 = instance.get('date');
-            expect(value1).have.lengthOf(2);
-            expect(value1[0]).eql(value1[1]);
-            // cancel all of range values and re-select
-            select.click();
-            _context19.next = 39;
-            return wait();
-          case 39:
-            // select the middle date
-            first.click();
-            dispatchEvent(first.previousElementSibling.previousElementSibling, 'click');
-            _context19.next = 43;
-            return wait();
-          case 43:
-            first.click();
-            dispatchEvent(first.previousElementSibling.previousElementSibling, 'click');
-            expect(instance.get('date')).eql(value);
-            // range cross months
-            select.click();
-            _context19.next = 49;
-            return wait();
-          case 49:
-            first.click();
-            second = content.querySelector('.k-datepicker-calendar-wrapper:nth-child(2) .k-calendar-item:nth-child(19)');
-            second.click();
-            _context19.next = 54;
-            return wait();
-          case 54:
-            expect(instance.get('date')).have.lengthOf(2);
-          case 55:
-          case "end":
-            return _context19.stop();
+        while (1) {
+          switch (_context19.prev = _context19.next) {
+            case 0:
+              _mount17 = mount(RangeDemo), instance = _mount17[0], element = _mount17[1]; // date
+
+              select = element.querySelector('.k-datepicker');
+              select.click();
+              _context19.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content'); // select the middle date
+
+              first = content.querySelector('.k-calendar-item:nth-child(18)');
+              first.click();
+              _context19.next = 10;
+              return wait();
+
+            case 10:
+              expect(instance.get('date')).to.be.null; // hover status
+
+              dispatchEvent(first.nextElementSibling.nextElementSibling, 'mouseenter');
+              _context19.next = 14;
+              return wait();
+
+            case 14:
+              expect(first.nextElementSibling.classList.contains('k-in-range')).to.be.true;
+              dispatchEvent(first.previousElementSibling.previousElementSibling, 'mouseenter');
+              _context19.next = 18;
+              return wait();
+
+            case 18:
+              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');
+              _context19.next = 23;
+              return wait();
+
+            case 23:
+              value = instance.get('date');
+              expect(value).have.lengthOf(2);
+              expect(value[0] < value[1]).to.be.true; // select the same date
+
+              select.click();
+              _context19.next = 29;
+              return wait();
+
+            case 29:
+              // select the middle date
+              first.click();
+              first.click();
+              _context19.next = 33;
+              return wait();
+
+            case 33:
+              value1 = instance.get('date');
+              expect(value1).have.lengthOf(2);
+              expect(value1[0]).eql(value1[1]); // cancel all of range values and re-select
+
+              select.click();
+              _context19.next = 39;
+              return wait();
+
+            case 39:
+              // select the middle date
+              first.click();
+              dispatchEvent(first.previousElementSibling.previousElementSibling, 'click');
+              _context19.next = 43;
+              return wait();
+
+            case 43:
+              first.click();
+              dispatchEvent(first.previousElementSibling.previousElementSibling, 'click');
+              expect(instance.get('date')).eql(value); // range cross months
+
+              select.click();
+              _context19.next = 49;
+              return wait();
+
+            case 49:
+              first.click();
+              second = content.querySelector('.k-datepicker-calendar-wrapper:nth-child(2) .k-calendar-item:nth-child(19)');
+              second.click();
+              _context19.next = 54;
+              return wait();
+
+            case 54:
+              expect(instance.get('date')).have.lengthOf(2);
+
+            case 55:
+            case "end":
+              return _context19.stop();
+          }
         }
       }, _callee19);
     })));
     it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
       var _mount18, instance, element, _element$querySelecto10, datetime, content, _content$querySelecto9, calendar1, calendar2, first, second, value2;
+
       return _regeneratorRuntime.wrap(function _callee20$(_context20) {
-        while (1) switch (_context20.prev = _context20.next) {
-          case 0:
-            _mount18 = mount(RangeDemo), instance = _mount18[0], element = _mount18[1];
-            _element$querySelecto10 = element.querySelectorAll('.k-datepicker'), datetime = _element$querySelecto10[1];
-            datetime.click();
-            _context20.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            _content$querySelecto9 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto9[0], calendar2 = _content$querySelecto9[1];
-            first = calendar1.querySelectorAll('.k-calendar-item')[17];
-            second = calendar2.querySelectorAll('.k-calendar-item')[17];
-            first.click();
-            second.click();
-            _context20.next = 13;
-            return wait();
-          case 13:
-            dispatchEvent(calendar1.querySelector('.k-scroll-select-wrapper .k-active').nextElementSibling, 'click');
-            dispatchEvent(calendar2.querySelector('.k-scroll-select-wrapper .k-active').previousElementSibling, 'click');
-            content.querySelector('.k-datepicker-footer .k-btn').click();
-            _context20.next = 18;
-            return wait();
-          case 18:
-            value2 = instance.get('time');
-            expect(value2).have.lengthOf(2);
-            expect(_mapInstanceProperty(value2).call(value2, function (item) {
-              return item.split(' ')[1];
-            })).eql(['01:00:00', '23:00:00']);
-          case 21:
-          case "end":
-            return _context20.stop();
+        while (1) {
+          switch (_context20.prev = _context20.next) {
+            case 0:
+              _mount18 = mount(RangeDemo), instance = _mount18[0], element = _mount18[1];
+              _element$querySelecto10 = element.querySelectorAll('.k-datepicker'), datetime = _element$querySelecto10[1];
+              datetime.click();
+              _context20.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              _content$querySelecto9 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto9[0], calendar2 = _content$querySelecto9[1];
+              first = calendar1.querySelectorAll('.k-calendar-item')[17];
+              second = calendar2.querySelectorAll('.k-calendar-item')[17];
+              first.click();
+              second.click();
+              _context20.next = 13;
+              return wait();
+
+            case 13:
+              dispatchEvent(calendar1.querySelector('.k-scroll-select-wrapper .k-active').nextElementSibling, 'click');
+              dispatchEvent(calendar2.querySelector('.k-scroll-select-wrapper .k-active').previousElementSibling, 'click');
+              content.querySelector('.k-datepicker-footer .k-btn').click();
+              _context20.next = 18;
+              return wait();
+
+            case 18:
+              value2 = instance.get('time');
+              expect(value2).have.lengthOf(2);
+              expect(_mapInstanceProperty(value2).call(value2, function (item) {
+                return item.split(' ')[1];
+              })).eql(['01:00:00', '23:00:00']);
+
+            case 21:
+            case "end":
+              return _context20.stop();
+          }
         }
       }, _callee20);
     })));
     it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
       var _mount19, instance, element, _element$querySelecto11, select, content, _content$querySelecto10, calendar1, calendar2, first, second, value;
+
       return _regeneratorRuntime.wrap(function _callee21$(_context21) {
-        while (1) switch (_context21.prev = _context21.next) {
-          case 0:
-            _mount19 = mount(RangeDemo), instance = _mount19[0], element = _mount19[1];
-            _element$querySelecto11 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto11[2];
-            select.click();
-            _context21.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            _content$querySelecto10 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto10[0], calendar2 = _content$querySelecto10[1];
-            first = calendar1.querySelector('.k-calendar-item:nth-child(2)');
-            second = calendar2.querySelector('.k-calendar-item:nth-child(2)');
-            first.click();
-            second.click();
-            _context21.next = 13;
-            return wait();
-          case 13:
-            value = instance.get('year');
-            expect(value).eql([String(startYear), String(startYear + 10)]);
-          case 15:
-          case "end":
-            return _context21.stop();
+        while (1) {
+          switch (_context21.prev = _context21.next) {
+            case 0:
+              _mount19 = mount(RangeDemo), instance = _mount19[0], element = _mount19[1];
+              _element$querySelecto11 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto11[2];
+              select.click();
+              _context21.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              _content$querySelecto10 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto10[0], calendar2 = _content$querySelecto10[1];
+              first = calendar1.querySelector('.k-calendar-item:nth-child(2)');
+              second = calendar2.querySelector('.k-calendar-item:nth-child(2)');
+              first.click();
+              second.click();
+              _context21.next = 13;
+              return wait();
+
+            case 13:
+              value = instance.get('year');
+              expect(value).eql([String(startYear), String(startYear + 10)]);
+
+            case 15:
+            case "end":
+              return _context21.stop();
+          }
         }
       }, _callee21);
     })));
     it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
       var _mount20, instance, element, _element$querySelecto12, select, content, _content$querySelecto11, calendar1, calendar2, first, second, value;
+
       return _regeneratorRuntime.wrap(function _callee22$(_context22) {
-        while (1) switch (_context22.prev = _context22.next) {
-          case 0:
-            _mount20 = mount(RangeDemo), instance = _mount20[0], element = _mount20[1];
-            _element$querySelecto12 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto12[3];
-            select.click();
-            _context22.next = 5;
-            return wait();
-          case 5:
-            content = getElement('.k-datepicker-content');
-            _content$querySelecto11 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto11[0], calendar2 = _content$querySelecto11[1];
-            first = calendar1.querySelector('.k-calendar-item:nth-child(1)');
-            second = calendar2.querySelector('.k-calendar-item:nth-child(1)');
-            first.click();
-            second.click();
-            _context22.next = 13;
-            return wait();
-          case 13:
-            value = instance.get('month');
-            expect(value).eql([year + "-01", year + 1 + "-01"]);
-          case 15:
-          case "end":
-            return _context22.stop();
+        while (1) {
+          switch (_context22.prev = _context22.next) {
+            case 0:
+              _mount20 = mount(RangeDemo), instance = _mount20[0], element = _mount20[1];
+              _element$querySelecto12 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto12[3];
+              select.click();
+              _context22.next = 5;
+              return wait();
+
+            case 5:
+              content = getElement('.k-datepicker-content');
+              _content$querySelecto11 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto11[0], calendar2 = _content$querySelecto11[1];
+              first = calendar1.querySelector('.k-calendar-item:nth-child(1)');
+              second = calendar2.querySelector('.k-calendar-item:nth-child(1)');
+              first.click();
+              second.click();
+              _context22.next = 13;
+              return wait();
+
+            case 13:
+              value = instance.get('month');
+              expect(value).eql([year + "-01", year + 1 + "-01"]);
+
+            case 15:
+            case "end":
+              return _context22.stop();
+          }
         }
       }, _callee22);
     })));
@@ -867,532 +1047,659 @@ describe('Datepicker', function () {
   describe('Keybord', function () {
     it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
       var _context23;
+
       var _mount21, instance, element, now, select, content;
+
       return _regeneratorRuntime.wrap(function _callee23$(_context24) {
-        while (1) switch (_context24.prev = _context24.next) {
-          case 0:
-            _mount21 = mount(BasicDemo), instance = _mount21[0], element = _mount21[1];
-            now = new Date();
-            select = element.querySelector('.k-datepicker');
-            select.click();
-            _context24.next = 6;
-            return wait();
-          case 6:
-            content = getElement('.k-datepicker-content'); // down
-            dispatchEvent(select, 'keydown', {
-              keyCode: 40
-            });
-            _context24.next = 10;
-            return wait();
-          case 10:
-            expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate());
-            // up
-            dispatchEvent(select, 'keydown', {
-              keyCode: 38
-            });
-            _context24.next = 14;
-            return wait();
-          case 14:
-            now.setDate(now.getDate() - 7);
-            expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate());
-            // right
-            dispatchEvent(select, 'keydown', {
-              keyCode: 39
-            });
-            _context24.next = 19;
-            return wait();
-          case 19:
-            now.setDate(now.getDate() + 1);
-            expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate());
-            // left
-            dispatchEvent(select, 'keydown', {
-              keyCode: 37
-            });
-            _context24.next = 24;
-            return wait();
-          case 24:
-            now.setDate(now.getDate() - 1);
-            expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate());
-            // enter
-            dispatchEvent(select, 'keydown', {
-              keyCode: 13
-            });
-            _context24.next = 29;
-            return wait();
-          case 29:
-            expect(_mapInstanceProperty(_context23 = instance.get('date').split('-')).call(_context23, function (v) {
-              return +v;
-            })).to.eql([now.getFullYear(), now.getMonth() + 1, now.getDate()]);
-            // again
-            select.click();
-            _context24.next = 33;
-            return wait();
-          case 33:
-            dispatchEvent(select, 'keydown', {
-              keyCode: 40
-            });
-            _context24.next = 36;
-            return wait();
-          case 36:
-            expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate());
-          case 37:
-          case "end":
-            return _context24.stop();
+        while (1) {
+          switch (_context24.prev = _context24.next) {
+            case 0:
+              _mount21 = mount(BasicDemo), instance = _mount21[0], element = _mount21[1];
+              now = new Date();
+              select = element.querySelector('.k-datepicker');
+              select.click();
+              _context24.next = 6;
+              return wait();
+
+            case 6:
+              content = getElement('.k-datepicker-content'); // down
+
+              dispatchEvent(select, 'keydown', {
+                keyCode: 40
+              });
+              _context24.next = 10;
+              return wait();
+
+            case 10:
+              expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate()); // up
+
+              dispatchEvent(select, 'keydown', {
+                keyCode: 38
+              });
+              _context24.next = 14;
+              return wait();
+
+            case 14:
+              now.setDate(now.getDate() - 7);
+              expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate()); // right
+
+              dispatchEvent(select, 'keydown', {
+                keyCode: 39
+              });
+              _context24.next = 19;
+              return wait();
+
+            case 19:
+              now.setDate(now.getDate() + 1);
+              expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate()); // left
+
+              dispatchEvent(select, 'keydown', {
+                keyCode: 37
+              });
+              _context24.next = 24;
+              return wait();
+
+            case 24:
+              now.setDate(now.getDate() - 1);
+              expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate()); // enter
+
+              dispatchEvent(select, 'keydown', {
+                keyCode: 13
+              });
+              _context24.next = 29;
+              return wait();
+
+            case 29:
+              expect(_mapInstanceProperty(_context23 = instance.get('date').split('-')).call(_context23, function (v) {
+                return +v;
+              })).to.eql([now.getFullYear(), now.getMonth() + 1, now.getDate()]); // again
+
+              select.click();
+              _context24.next = 33;
+              return wait();
+
+            case 33:
+              dispatchEvent(select, 'keydown', {
+                keyCode: 40
+              });
+              _context24.next = 36;
+              return wait();
+
+            case 36:
+              expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate());
+
+            case 37:
+            case "end":
+              return _context24.stop();
+          }
         }
       }, _callee23);
     })));
     it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
       var _mount22, instance, element, select, value, _value;
+
       return _regeneratorRuntime.wrap(function _callee24$(_context25) {
-        while (1) switch (_context25.prev = _context25.next) {
-          case 0:
-            _mount22 = mount(RangeDemo), instance = _mount22[0], element = _mount22[1];
-            select = element.querySelector('.k-datepicker');
-            select.click();
-            _context25.next = 5;
-            return wait();
-          case 5:
-            dispatchEvent(select, 'keydown', {
-              keyCode: 40
-            });
-            dispatchEvent(select, 'keydown', {
-              keyCode: 13
-            });
-            dispatchEvent(select, 'keydown', {
-              keyCode: 40
-            });
-            dispatchEvent(select, 'keydown', {
-              keyCode: 13
-            });
-            _context25.next = 11;
-            return wait();
-          case 11:
-            value = instance.get('date');
-            expect(value).have.lengthOf(2);
-            // again
-            select.click();
-            _context25.next = 16;
-            return wait();
-          case 16:
-            dispatchEvent(select, 'keydown', {
-              keyCode: 38
-            });
-            dispatchEvent(select, 'keydown', {
-              keyCode: 13
-            });
-            dispatchEvent(select, 'keydown', {
-              keyCode: 13
-            });
-            _context25.next = 21;
-            return wait();
-          case 21:
-            _value = instance.get('date');
-            expect(_value[0]).eql(_value[1]);
-          case 23:
-          case "end":
-            return _context25.stop();
+        while (1) {
+          switch (_context25.prev = _context25.next) {
+            case 0:
+              _mount22 = mount(RangeDemo), instance = _mount22[0], element = _mount22[1];
+              select = element.querySelector('.k-datepicker');
+              select.click();
+              _context25.next = 5;
+              return wait();
+
+            case 5:
+              dispatchEvent(select, 'keydown', {
+                keyCode: 40
+              });
+              dispatchEvent(select, 'keydown', {
+                keyCode: 13
+              });
+              dispatchEvent(select, 'keydown', {
+                keyCode: 40
+              });
+              dispatchEvent(select, 'keydown', {
+                keyCode: 13
+              });
+              _context25.next = 11;
+              return wait();
+
+            case 11:
+              value = instance.get('date');
+              expect(value).have.lengthOf(2); // again
+
+              select.click();
+              _context25.next = 16;
+              return wait();
+
+            case 16:
+              dispatchEvent(select, 'keydown', {
+                keyCode: 38
+              });
+              dispatchEvent(select, 'keydown', {
+                keyCode: 13
+              });
+              dispatchEvent(select, 'keydown', {
+                keyCode: 13
+              });
+              _context25.next = 21;
+              return wait();
+
+            case 21:
+              _value = instance.get('date');
+              expect(_value[0]).eql(_value[1]);
+
+            case 23:
+            case "end":
+              return _context25.stop();
+          }
         }
       }, _callee24);
     })));
   });
   describe('Event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
     return _regeneratorRuntime.wrap(function _callee26$(_context28) {
-      while (1) switch (_context28.prev = _context28.next) {
-        case 0:
-          it('selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
-            var fn, Demo, _mount23, instance, element, content, _content$querySelecto12, calendar1, calendar2, first, second;
-            return _regeneratorRuntime.wrap(function _callee25$(_context27) {
-              while (1) switch (_context27.prev = _context27.next) {
-                case 0:
-                  fn = sinon.spy(function (v) {
-                    return console.log(v);
-                  });
-                  Demo = /*#__PURE__*/function (_Component) {
-                    _inheritsLoose(Demo, _Component);
-                    function Demo() {
-                      var _context26;
-                      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(_context26 = [this]).call(_context26, args)) || this;
-                      _this.Datepicker = Datepicker;
-                      return _this;
-                    }
-                    var _proto = Demo.prototype;
-                    _proto.onSelecting = function onSelecting(v) {
-                      fn(v);
-                    };
-                    return Demo;
-                  }(Component);
-                  Demo.template = "\n                    const {Datepicker} = this;\n                    <Datepicker ev-selecting={this.onSelecting} range type=\"datetime\" />\n                ";
-                  _mount23 = mount(Demo), instance = _mount23[0], element = _mount23[1];
-                  element.click();
-                  _context27.next = 7;
-                  return wait();
-                case 7:
-                  content = getElement('.k-datepicker-content');
-                  _content$querySelecto12 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto12[0], calendar2 = _content$querySelecto12[1];
-                  first = calendar1.querySelectorAll('.k-calendar-item')[17];
-                  second = calendar2.querySelectorAll('.k-calendar-item')[17];
-                  first.click();
-                  expect(fn.callCount).to.eql(1);
-                  expect(fn.lastCall.args[0]).have.lengthOf(1);
-                  second.click();
-                  expect(fn.callCount).to.eql(2);
-                  expect(fn.lastCall.args[0]).have.lengthOf(2);
-                  _context27.next = 19;
-                  return wait();
-                case 19:
-                  dispatchEvent(calendar1.querySelector('.k-scroll-select-wrapper .k-active').nextElementSibling, 'click');
-                  expect(fn.callCount).to.eql(3);
-                  expect(fn.lastCall.args[0]).have.lengthOf(2);
-                  dispatchEvent(calendar2.querySelector('.k-scroll-select-wrapper .k-active').previousElementSibling, 'click');
-                  expect(fn.callCount).to.eql(4);
-                  expect(fn.lastCall.args[0]).have.lengthOf(2);
-                  content.querySelector('.k-datepicker-footer .k-btn').click();
-                  _context27.next = 28;
-                  return wait();
-                case 28:
-                  expect(fn.callCount).to.eql(4);
-                case 29:
-                case "end":
-                  return _context27.stop();
-              }
-            }, _callee25);
-          })));
-        case 1:
-        case "end":
-          return _context28.stop();
+      while (1) {
+        switch (_context28.prev = _context28.next) {
+          case 0:
+            it('selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+              var fn, Demo, _mount23, instance, element, content, _content$querySelecto12, calendar1, calendar2, first, second;
+
+              return _regeneratorRuntime.wrap(function _callee25$(_context27) {
+                while (1) {
+                  switch (_context27.prev = _context27.next) {
+                    case 0:
+                      fn = sinon.spy(function (v) {
+                        return console.log(v);
+                      });
+
+                      Demo = /*#__PURE__*/function (_Component) {
+                        _inheritsLoose(Demo, _Component);
+
+                        function Demo() {
+                          var _context26;
+
+                          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(_context26 = [this]).call(_context26, args)) || this;
+                          _this.Datepicker = Datepicker;
+                          return _this;
+                        }
+
+                        var _proto = Demo.prototype;
+
+                        _proto.onSelecting = function onSelecting(v) {
+                          fn(v);
+                        };
+
+                        return Demo;
+                      }(Component);
+
+                      Demo.template = "\n                    const {Datepicker} = this;\n                    <Datepicker ev-selecting={this.onSelecting} range type=\"datetime\" />\n                ";
+                      _mount23 = mount(Demo), instance = _mount23[0], element = _mount23[1];
+                      element.click();
+                      _context27.next = 7;
+                      return wait();
+
+                    case 7:
+                      content = getElement('.k-datepicker-content');
+                      _content$querySelecto12 = content.querySelectorAll('.k-datepicker-calendar-wrapper'), calendar1 = _content$querySelecto12[0], calendar2 = _content$querySelecto12[1];
+                      first = calendar1.querySelectorAll('.k-calendar-item')[17];
+                      second = calendar2.querySelectorAll('.k-calendar-item')[17];
+                      first.click();
+                      expect(fn.callCount).to.eql(1);
+                      expect(fn.lastCall.args[0]).have.lengthOf(1);
+                      second.click();
+                      expect(fn.callCount).to.eql(2);
+                      expect(fn.lastCall.args[0]).have.lengthOf(2);
+                      _context27.next = 19;
+                      return wait();
+
+                    case 19:
+                      dispatchEvent(calendar1.querySelector('.k-scroll-select-wrapper .k-active').nextElementSibling, 'click');
+                      expect(fn.callCount).to.eql(3);
+                      expect(fn.lastCall.args[0]).have.lengthOf(2);
+                      dispatchEvent(calendar2.querySelector('.k-scroll-select-wrapper .k-active').previousElementSibling, 'click');
+                      expect(fn.callCount).to.eql(4);
+                      expect(fn.lastCall.args[0]).have.lengthOf(2);
+                      content.querySelector('.k-datepicker-footer .k-btn').click();
+                      _context27.next = 28;
+                      return wait();
+
+                    case 28:
+                      expect(fn.callCount).to.eql(4);
+
+                    case 29:
+                    case "end":
+                      return _context27.stop();
+                  }
+                }
+              }, _callee25);
+            })));
+
+          case 1:
+          case "end":
+            return _context28.stop();
+        }
       }
     }, _callee26);
   })));
   it('should disable some time pickers', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
     var _mount24, instance, element, input, content;
+
     return _regeneratorRuntime.wrap(function _callee27$(_context29) {
-      while (1) switch (_context29.prev = _context29.next) {
-        case 0:
-          _mount24 = mount(DatetimeDemo), instance = _mount24[0], element = _mount24[1];
-          input = element.querySelectorAll('.k-input')[1];
-          input.click();
-          _context29.next = 5;
-          return wait();
-        case 5:
-          content = getElement('.k-datepicker-content'); // change to time panel
-          content.querySelector('.k-calendar-item').click();
-          _context29.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();
-          expect(instance.get('datetime2').split(' ')[1]).eql('00:00');
-        case 12:
-        case "end":
-          return _context29.stop();
+      while (1) {
+        switch (_context29.prev = _context29.next) {
+          case 0:
+            _mount24 = mount(DatetimeDemo), instance = _mount24[0], element = _mount24[1];
+            input = element.querySelectorAll('.k-input')[1];
+            input.click();
+            _context29.next = 5;
+            return wait();
+
+          case 5:
+            content = getElement('.k-datepicker-content'); // change to time panel
+
+            content.querySelector('.k-calendar-item').click();
+            _context29.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();
+            expect(instance.get('datetime2').split(' ')[1]).eql('00:00');
+
+          case 12:
+          case "end":
+            return _context29.stop();
+        }
       }
     }, _callee27);
   })));
   it('format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
     var _mount25, instance, element, _element$querySelecto13, input1, input2, input3, content;
+
     return _regeneratorRuntime.wrap(function _callee28$(_context30) {
-      while (1) switch (_context30.prev = _context30.next) {
-        case 0:
-          _mount25 = mount(FormatDemo), instance = _mount25[0], element = _mount25[1];
-          _element$querySelecto13 = element.querySelectorAll('.k-input-inner'), input1 = _element$querySelecto13[0], input2 = _element$querySelecto13[1], input3 = _element$querySelecto13[2];
-          input1.click();
-          _context30.next = 5;
-          return wait();
-        case 5:
-          content = getElement('.k-datepicker-content');
-          content.querySelector('.k-today').click();
-          _context30.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();
-          _context30.next = 14;
-          return wait();
-        case 14:
-          content = getElement('.k-datepicker-content');
-          content.querySelector('.k-today').click();
-          _context30.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();
-          _context30.next = 23;
-          return wait();
-        case 23:
-          content = getElement('.k-datepicker-content');
-          content.querySelector('.k-today').click();
-          _context30.next = 27;
-          return wait();
-        case 27:
-          content.querySelector('.k-btn').click();
-          _context30.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 _context30.stop();
+      while (1) {
+        switch (_context30.prev = _context30.next) {
+          case 0:
+            _mount25 = mount(FormatDemo), instance = _mount25[0], element = _mount25[1];
+            _element$querySelecto13 = element.querySelectorAll('.k-input-inner'), input1 = _element$querySelecto13[0], input2 = _element$querySelecto13[1], input3 = _element$querySelecto13[2];
+            input1.click();
+            _context30.next = 5;
+            return wait();
+
+          case 5:
+            content = getElement('.k-datepicker-content');
+            content.querySelector('.k-today').click();
+            _context30.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();
+            _context30.next = 14;
+            return wait();
+
+          case 14:
+            content = getElement('.k-datepicker-content');
+            content.querySelector('.k-today').click();
+            _context30.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();
+            _context30.next = 23;
+            return wait();
+
+          case 23:
+            content = getElement('.k-datepicker-content');
+            content.querySelector('.k-today').click();
+            _context30.next = 27;
+            return wait();
+
+          case 27:
+            content.querySelector('.k-btn').click();
+            _context30.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 _context30.stop();
+        }
       }
     }, _callee28);
   })));
   describe('Max / Min', function () {
     it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
       var _mount26, instance, element, now, content, dateDoms;
+
       return _regeneratorRuntime.wrap(function _callee29$(_context31) {
-        while (1) switch (_context31.prev = _context31.next) {
-          case 0:
-            _mount26 = mount(MaxMinDemo), instance = _mount26[0], element = _mount26[1];
-            now = dayjs().format('YYYY-MM-DD');
-            instance.set('to', now);
-            element.querySelector('.k-datepicker').click();
-            _context31.next = 6;
-            return wait();
-          case 6:
-            content = getElement('.k-datepicker-content');
-            dateDoms = content.querySelectorAll('.k-calendar-item:not(.k-disabled)');
-            expect(dateDoms.length).to.eql(1);
-            expect(+dateDoms[0].textContent).to.eql(+now.split('-')[2]);
-          case 10:
-          case "end":
-            return _context31.stop();
+        while (1) {
+          switch (_context31.prev = _context31.next) {
+            case 0:
+              _mount26 = mount(MaxMinDemo), instance = _mount26[0], element = _mount26[1];
+              now = dayjs().format('YYYY-MM-DD');
+              instance.set('to', now);
+              element.querySelector('.k-datepicker').click();
+              _context31.next = 6;
+              return wait();
+
+            case 6:
+              content = getElement('.k-datepicker-content');
+              dateDoms = content.querySelectorAll('.k-calendar-item:not(.k-disabled)');
+              expect(dateDoms.length).to.eql(1);
+              expect(+dateDoms[0].textContent).to.eql(+now.split('-')[2]);
+
+            case 10:
+            case "end":
+              return _context31.stop();
+          }
         }
       }, _callee29);
     })));
     it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
       var _mount27, instance, element, now, content;
+
       return _regeneratorRuntime.wrap(function _callee30$(_context32) {
-        while (1) switch (_context32.prev = _context32.next) {
-          case 0:
-            _mount27 = mount(MaxMinDemo), instance = _mount27[0], element = _mount27[1];
-            now = dayjs().format('YYYY-MM-DD') + '00:00:00';
-            instance.set('toTime', now);
-            element.querySelectorAll('.k-datepicker')[2].click();
-            _context32.next = 6;
-            return wait();
-          case 6:
-            content = getElement('.k-datepicker-content');
-            content.querySelector('.k-today').click();
-            _context32.next = 10;
-            return wait();
-          case 10:
-            expect(content.querySelectorAll('.k-scroll-select-item:not(.k-disabled)')).have.lengthOf(3);
-          case 11:
-          case "end":
-            return _context32.stop();
+        while (1) {
+          switch (_context32.prev = _context32.next) {
+            case 0:
+              _mount27 = mount(MaxMinDemo), instance = _mount27[0], element = _mount27[1];
+              now = dayjs().format('YYYY-MM-DD') + '00:00:00';
+              instance.set('toTime', now);
+              element.querySelectorAll('.k-datepicker')[2].click();
+              _context32.next = 6;
+              return wait();
+
+            case 6:
+              content = getElement('.k-datepicker-content');
+              content.querySelector('.k-today').click();
+              _context32.next = 10;
+              return wait();
+
+            case 10:
+              expect(content.querySelectorAll('.k-scroll-select-item:not(.k-disabled)')).have.lengthOf(3);
+
+            case 11:
+            case "end":
+              return _context32.stop();
+          }
         }
       }, _callee30);
     })));
     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 _callee31() {
       var _mount28, instance, element, date, time, fromTime, endTimeTrigger, content;
+
       return _regeneratorRuntime.wrap(function _callee31$(_context33) {
-        while (1) switch (_context33.prev = _context33.next) {
-          case 0:
-            _mount28 = mount(MaxMinDemo), instance = _mount28[0], element = _mount28[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();
-            _context33.next = 9;
-            return wait();
-          case 9:
-            content = getElement('.k-datepicker-content');
-            content.querySelector('.k-today').click();
-            _context33.next = 13;
-            return wait();
-          case 13:
-            content.querySelector('.k-btn').click();
-            _context33.next = 16;
-            return wait();
-          case 16:
-            expect(instance.get('toTime')).to.eql(date + " " + time);
-          case 17:
-          case "end":
-            return _context33.stop();
+        while (1) {
+          switch (_context33.prev = _context33.next) {
+            case 0:
+              _mount28 = mount(MaxMinDemo), instance = _mount28[0], element = _mount28[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();
+              _context33.next = 9;
+              return wait();
+
+            case 9:
+              content = getElement('.k-datepicker-content');
+              content.querySelector('.k-today').click();
+              _context33.next = 13;
+              return wait();
+
+            case 13:
+              content.querySelector('.k-btn').click();
+              _context33.next = 16;
+              return wait();
+
+            case 16:
+              expect(instance.get('toTime')).to.eql(date + " " + time);
+
+            case 17:
+            case "end":
+              return _context33.stop();
+          }
         }
       }, _callee31);
     })));
   });
   describe('Input', function () {
     var globalInput;
+
     function test(template) {
       var Demo = /*#__PURE__*/function (_Component2) {
         _inheritsLoose(Demo, _Component2);
+
         function Demo() {
           var _context34;
+
           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(_context34 = [this]).call(_context34, args)) || this;
           _this2.Datepicker = Datepicker;
           return _this2;
         }
+
         return Demo;
       }(Component);
+
       Demo.template = "\n                    const {Datepicker} = this;\n                    " + template + "\n                ";
+
       var _mount29 = mount(Demo),
-        instance = _mount29[0],
-        element = _mount29[1];
+          instance = _mount29[0],
+          element = _mount29[1];
+
       var input = element.querySelector('.k-input-inner');
       globalInput = input;
       return /*#__PURE__*/function () {
         var _ref32 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32(value, result) {
           return _regeneratorRuntime.wrap(function _callee32$(_context35) {
-            while (1) switch (_context35.prev = _context35.next) {
-              case 0:
-                input.value = value;
-                dispatchEvent(input, 'input');
-                _context35.next = 4;
-                return wait();
-              case 4:
-                expect(instance.get('value')).to.eql(result);
-              case 5:
-              case "end":
-                return _context35.stop();
+            while (1) {
+              switch (_context35.prev = _context35.next) {
+                case 0:
+                  input.value = value;
+                  dispatchEvent(input, 'input');
+                  _context35.next = 4;
+                  return wait();
+
+                case 4:
+                  expect(instance.get('value')).to.eql(result);
+
+                case 5:
+                case "end":
+                  return _context35.stop();
+              }
             }
           }, _callee32);
         }));
+
         return function (_x, _x2) {
           return _ref32.apply(this, arguments);
         };
       }();
     }
+
     it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
       var myTest;
       return _regeneratorRuntime.wrap(function _callee33$(_context36) {
-        while (1) switch (_context36.prev = _context36.next) {
-          case 0:
-            myTest = test("<Datepicker v-model=\"value\" max=\"2021-11-11\" min=\"2020-01-01\" />"); // input incorrect value
-            _context36.next = 3;
-            return myTest('2020', undefined);
-          case 3:
-            _context36.next = 5;
-            return myTest('2020-02-02', '2020-02-02');
-          case 5:
-            _context36.next = 7;
-            return myTest('', null);
-          case 7:
-            _context36.next = 9;
-            return myTest('1999-01-01', null);
-          case 9:
-          case "end":
-            return _context36.stop();
+        while (1) {
+          switch (_context36.prev = _context36.next) {
+            case 0:
+              myTest = test("<Datepicker v-model=\"value\" max=\"2021-11-11\" min=\"2020-01-01\" />"); // input incorrect value
+
+              _context36.next = 3;
+              return myTest('2020', undefined);
+
+            case 3:
+              _context36.next = 5;
+              return myTest('2020-02-02', '2020-02-02');
+
+            case 5:
+              _context36.next = 7;
+              return myTest('', null);
+
+            case 7:
+              _context36.next = 9;
+              return myTest('1999-01-01', null);
+
+            case 9:
+            case "end":
+              return _context36.stop();
+          }
         }
       }, _callee33);
     })));
     it('multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
       var myTest;
       return _regeneratorRuntime.wrap(function _callee34$(_context37) {
-        while (1) switch (_context37.prev = _context37.next) {
-          case 0:
-            myTest = test("<Datepicker v-model=\"value\" multiple />"); // input incorrect value
-            _context37.next = 3;
-            return myTest('2', undefined);
-          case 3:
-            _context37.next = 5;
-            return myTest('2020-02-02', ['2020-02-02']);
-          case 5:
-            _context37.next = 7;
-            return myTest('2', ['2020-02-02']);
-          case 7:
-            _context37.next = 9;
-            return myTest('2020-03-03', ['2020-02-02', '2020-03-03']);
-          case 9:
-          case "end":
-            return _context37.stop();
+        while (1) {
+          switch (_context37.prev = _context37.next) {
+            case 0:
+              myTest = test("<Datepicker v-model=\"value\" multiple />"); // input incorrect value
+
+              _context37.next = 3;
+              return myTest('2', undefined);
+
+            case 3:
+              _context37.next = 5;
+              return myTest('2020-02-02', ['2020-02-02']);
+
+            case 5:
+              _context37.next = 7;
+              return myTest('2', ['2020-02-02']);
+
+            case 7:
+              _context37.next = 9;
+              return myTest('2020-03-03', ['2020-02-02', '2020-03-03']);
+
+            case 9:
+            case "end":
+              return _context37.stop();
+          }
         }
       }, _callee34);
     })));
     it('range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
       var myTest;
       return _regeneratorRuntime.wrap(function _callee35$(_context38) {
-        while (1) switch (_context38.prev = _context38.next) {
-          case 0:
-            myTest = test("<Datepicker v-model=\"value\" range max=\"2021-11-11\" min=\"2020-01-01\" />");
-            _context38.next = 3;
-            return myTest('2020-03-03', undefined);
-          case 3:
-            _context38.next = 5;
-            return myTest('2020-03-03~', undefined);
-          case 5:
-            // input correct value
-            dispatchEvent(globalInput, 'click'); // show calendar
-            _context38.next = 8;
-            return wait();
-          case 8:
-            _context38.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-wrapper:nth-child(1)').innerHTML).to.matchSnapshot();
-            // clear value
-            _context38.next = 13;
-            return myTest('', null);
-          case 13:
-            _context38.next = 15;
-            return myTest('1999-01-01~2020-03-04', null);
-          case 15:
-          case "end":
-            return _context38.stop();
+        while (1) {
+          switch (_context38.prev = _context38.next) {
+            case 0:
+              myTest = test("<Datepicker v-model=\"value\" range max=\"2021-11-11\" min=\"2020-01-01\" />");
+              _context38.next = 3;
+              return myTest('2020-03-03', undefined);
+
+            case 3:
+              _context38.next = 5;
+              return myTest('2020-03-03~', undefined);
+
+            case 5:
+              // input correct value
+              dispatchEvent(globalInput, 'click'); // show calendar
+
+              _context38.next = 8;
+              return wait();
+
+            case 8:
+              _context38.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-wrapper:nth-child(1)').innerHTML).to.matchSnapshot(); // clear value
+
+              _context38.next = 13;
+              return myTest('', null);
+
+            case 13:
+              _context38.next = 15;
+              return myTest('1999-01-01~2020-03-04', null);
+
+            case 15:
+            case "end":
+              return _context38.stop();
+          }
         }
       }, _callee35);
     })));
     it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
       var myTest;
       return _regeneratorRuntime.wrap(function _callee36$(_context39) {
-        while (1) switch (_context39.prev = _context39.next) {
-          case 0:
-            myTest = test("<Datepicker v-model=\"value\" type=\"datetime\" />");
-            _context39.next = 3;
-            return myTest('2020-03-03', undefined);
-          case 3:
-            _context39.next = 5;
-            return myTest('2020-03-03 02:02:02', '2020-03-03 02:02:02');
-          case 5:
-          case "end":
-            return _context39.stop();
+        while (1) {
+          switch (_context39.prev = _context39.next) {
+            case 0:
+              myTest = test("<Datepicker v-model=\"value\" type=\"datetime\" />");
+              _context39.next = 3;
+              return myTest('2020-03-03', undefined);
+
+            case 3:
+              _context39.next = 5;
+              return myTest('2020-03-03 02:02:02', '2020-03-03 02:02:02');
+
+            case 5:
+            case "end":
+              return _context39.stop();
+          }
         }
       }, _callee36);
     })));
     it('datetime range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
       var myTest;
       return _regeneratorRuntime.wrap(function _callee37$(_context40) {
-        while (1) switch (_context40.prev = _context40.next) {
-          case 0:
-            myTest = test('<Datepicker v-model="value" type="datetime" range />');
-            _context40.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:
-            _context40.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:
-            _context40.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 _context40.stop();
+        while (1) {
+          switch (_context40.prev = _context40.next) {
+            case 0:
+              myTest = test('<Datepicker v-model="value" type="datetime" range />');
+              _context40.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:
+              _context40.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:
+              _context40.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 _context40.stop();
+          }
         }
       }, _callee37);
     })));
     it('date format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
       var myTest;
       return _regeneratorRuntime.wrap(function _callee38$(_context41) {
-        while (1) switch (_context41.prev = _context41.next) {
-          case 0:
-            myTest = test("<Datepicker v-model=\"value\" showFormat=\"YYYY\u5E74M\u6708D\u65E5\" />");
-            _context41.next = 3;
-            return myTest('2020年2月19日', '2020-02-19');
-          case 3:
-          case "end":
-            return _context41.stop();
+        while (1) {
+          switch (_context41.prev = _context41.next) {
+            case 0:
+              myTest = test("<Datepicker v-model=\"value\" showFormat=\"YYYY\u5E74M\u6708D\u65E5\" />");
+              _context41.next = 3;
+              return myTest('2020年2月19日', '2020-02-19');
+
+            case 3:
+            case "end":
+              return _context41.stop();
+          }
         }
       }, _callee38);
     })));