@king-design/vue 2.0.0-beta.0

package/components/datepicker/index.spec.js

@@ -0,0 +1,1703 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _Array$from2 from "@babel/runtime-corejs3/core-js/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import BasicDemo from '~/components/datepicker/demos/basic';
+import YearMonthDemo from '~/components/datepicker/demos/yearMonth';
+import ClearableDemo from '~/components/datepicker/demos/clearable';
+import DatetimeDemo from '~/components/datepicker/demos/datetime';
+import RangeDemo from '~/components/datepicker/demos/range';
+import MultipleDemo from '~/components/datepicker/demos/multiple';
+import { mount, unmount, dispatchEvent, wait, getElement } from '../../test/utils';
+import { Component } from 'intact-vue-next';
+import { Datepicker } from './';
+import FormatDemo from '~/components/datepicker/demos/format';
+import dayjs from 'dayjs';
+import MaxMinDemo from '~/components/datepicker/demos/maxMin';
+var now = new Date();
+var year = now.getFullYear();
+var startYear = Math.floor(year / 10) * 10;
+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(400);
+
+          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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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, _panel2$querySelector, prevYear;
+
+              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();
+                      _context7.next = 12;
+                      return wait();
+
+                    case 12:
+                      expect(monthValues1.textContent).to.eql(year + "\u5E74" + (month + 1 + 1) + "\u6708");
+                      expect(monthValues2.textContent).to.eql(year + "\u5E74" + (month + 1 + 2) + "\u6708");
+                      nextYear.click();
+                      _context7.next = 17;
+                      return wait();
+
+                    case 17:
+                      expect(monthValues1.textContent).to.eql(year + 1 + "\u5E74" + (month + 1 + 1) + "\u6708");
+                      expect(monthValues2.textContent).to.eql(year + 1 + "\u5E74" + (month + 1 + 2) + "\u6708");
+                      _panel2$querySelector = panel2.querySelectorAll('.k-prev'), prevYear = _panel2$querySelector[0];
+                      prevYear.click();
+                      _context7.next = 23;
+                      return wait();
+
+                    case 23:
+                      expect(monthValues1.textContent).to.eql(year + "\u5E74" + (month + 1 + 1) + "\u6708");
+                      expect(monthValues2.textContent).to.eql(year + "\u5E74" + (month + 1 + 2) + "\u6708"); // year panel
+
+                      dispatchEvent(monthValues1.firstElementChild, 'click');
+                      dispatchEvent(monthValues2.firstElementChild, 'click');
+                      _context7.next = 29;
+                      return wait();
+
+                    case 29:
+                      expect(monthValues1.textContent).to.eql(startYear + "\u5E74 - " + (startYear + 9) + "\u5E74");
+                      expect(monthValues1.textContent).to.eql(monthValues2.textContent);
+                      nextYear.click();
+                      _context7.next = 34;
+                      return wait();
+
+                    case 34:
+                      expect(monthValues1.textContent).to.eql(startYear + 10 + "\u5E74 - " + (startYear + 19) + "\u5E74");
+                      expect(monthValues1.textContent).to.eql(monthValues2.textContent);
+
+                    case 36:
+                    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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _callee12);
+    })));
+  });
+  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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _callee18);
+    })));
+  });
+  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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _callee22);
+    })));
+  });
+  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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+        }
+      }
+    }, _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();
+        }
+      }
+    }, _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();
+        }
+      }
+    }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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];
+
+      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();
+              }
+            }
+          }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _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();
+          }
+        }
+      }, _callee38);
+    })));
+  });
+});
+
+export {normalize} from 'intact-vue-next';