@king-design/react 2.1.2 → 2.1.4

package/components/datepicker/index.spec.js

@@ -23,448 +23,369 @@ 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);
     })));
@@ -472,360 +393,295 @@ 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);
     })));
@@ -833,213 +689,177 @@ 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);
     })));
@@ -1047,659 +867,532 @@ 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);
     })));