@king-design/intact 3.5.2 → 3.6.0-beta.0

package/es/components/datepicker/index.spec.js

@@ -1,7 +1,6 @@
 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 _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
 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";
@@ -126,20 +125,65 @@ describe('Datepicker', function () {
         }
       }, _callee5);
     })));
+    it('week', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+      var _mount5, instance, element, inputs, WeekInput, content, weekItem;
+      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            _mount5 = mount(YearMonthDemo), instance = _mount5[0], element = _mount5[1];
+            inputs = element.querySelectorAll('.k-input');
+            WeekInput = inputs[2];
+            WeekInput.click();
+            _context6.next = 6;
+            return wait();
+          case 6:
+            content = getElement('.k-datepicker-content');
+            weekItem = content.querySelector('.week-row:nth-child(1) .k-week-number');
+            weekItem.click();
+            expect(instance.get('week')).to.match(/^\d{4}-\d+周$/);
+          case 10:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee6);
+    })));
+    it('quarter', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+      var _mount6, instance, element, inputs, QuarterInput, content, quarterItem;
+      return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            _mount6 = mount(YearMonthDemo), instance = _mount6[0], element = _mount6[1];
+            inputs = element.querySelectorAll('.k-input');
+            QuarterInput = inputs[3];
+            QuarterInput.click();
+            _context7.next = 6;
+            return wait();
+          case 6:
+            content = getElement('.k-datepicker-content'); // 选择第一个季度  
+            quarterItem = content.querySelector('.k-calendar-item:nth-child(1)');
+            quarterItem.click();
+            // 验证输入框的值是否包含Q1
+            expect(instance.get('quarter')).to.include('Q1');
+          case 10:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7);
+    })));
   });
-  describe('Panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
-    return _regeneratorRuntime.wrap(function _callee10$(_context10) {
-      while (1) switch (_context10.prev = _context10.next) {
+  describe('Panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    return _regeneratorRuntime.wrap(function _callee12$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
         case 0:
-          it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _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) {
+          it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+            var _mount7, instance, element, input, content, _Array$from, prevYear, prevMonth, _Array$from3, nextMonth, nextYear, curDate, _Array$from4, yearDom, monthDom, curDate1, curMonth;
+            return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+              while (1) switch (_context8.prev = _context8.next) {
                 case 0:
-                  _mount5 = mount(BasicDemo), instance = _mount5[0], element = _mount5[1];
+                  _mount7 = mount(BasicDemo), instance = _mount7[0], element = _mount7[1];
                   input = element.querySelector('.k-input');
                   input.click();
-                  _context6.next = 5;
+                  _context8.next = 5;
                   return wait();
                 case 5:
                   content = getElement('.k-datepicker-content');
@@ -154,7 +198,7 @@ describe('Datepicker', function () {
                   dispatchEvent(nextMonth, 'click');
                   // click next year once
                   dispatchEvent(nextYear, 'click');
-                  _context6.next = 16;
+                  _context8.next = 16;
                   return wait();
                 case 16:
                   // select the middle date
@@ -166,21 +210,21 @@ describe('Datepicker', function () {
                   expect(curDate.getMonth()).be.eql(month);
                   // change year and month in year/month panel
                   input.click();
-                  _context6.next = 25;
+                  _context8.next = 25;
                   return wait();
                 case 25:
                   content = getElement('.k-datepicker-content');
                   _Array$from4 = _Array$from2(content.querySelectorAll('.k-month-value')), yearDom = _Array$from4[0], monthDom = _Array$from4[1];
                   yearDom.click();
-                  _context6.next = 30;
+                  _context8.next = 30;
                   return wait();
                 case 30:
                   content.querySelector('.k-today').click();
-                  _context6.next = 33;
+                  _context8.next = 33;
                   return wait();
                 case 33:
                   content.querySelector('.k-today').click();
-                  _context6.next = 36;
+                  _context8.next = 36;
                   return wait();
                 case 36:
                   // select the middle date
@@ -191,23 +235,23 @@ describe('Datepicker', function () {
                   expect(curDate1.getFullYear()).be.eql(year);
                 case 41:
                 case "end":
-                  return _context6.stop();
+                  return _context8.stop();
               }
-            }, _callee6);
+            }, _callee8);
           })));
-          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) {
+          it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+            var _mount8, instance, element, select, content, _content$querySelecto, panel1, panel2, _panel1$querySelector, nextMonth, nextYear, _content$querySelecto2, monthValues1, monthValues2, monthStart, yearStart, monthEnd, yearEnd, _panel2$querySelector, prevYear, firstDecadeStart, secondDecadeStart;
+            return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+              while (1) switch (_context9.prev = _context9.next) {
                 case 0:
-                  _mount6 = mount(RangeDemo), instance = _mount6[0], element = _mount6[1];
+                  _mount8 = mount(RangeDemo), instance = _mount8[0], element = _mount8[1];
                   select = element.querySelector('.k-datepicker');
                   select.click();
-                  _context7.next = 5;
+                  _context9.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];
+                  _content$querySelecto = content.querySelectorAll('.k-datepicker-calendar-time-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();
@@ -215,20 +259,20 @@ describe('Datepicker', function () {
                   yearStart = year + Math.floor((month + 1) / 12);
                   monthEnd = (month + 2) % 12 + 1;
                   yearEnd = year + Math.floor((month + 2) / 12);
-                  _context7.next = 16;
+                  _context9.next = 16;
                   return wait();
                 case 16:
                   expect(monthValues1.textContent).to.eql(yearStart + "\u5E74" + monthStart + "\u6708");
                   expect(monthValues2.textContent).to.eql(yearEnd + "\u5E74" + monthEnd + "\u6708");
                   nextYear.click();
-                  _context7.next = 21;
+                  _context9.next = 21;
                   return wait();
                 case 21:
                   expect(monthValues1.textContent).to.eql(yearStart + 1 + "\u5E74" + monthStart + "\u6708");
                   expect(monthValues2.textContent).to.eql(yearEnd + 1 + "\u5E74" + monthEnd + "\u6708");
                   _panel2$querySelector = panel2.querySelectorAll('.k-prev'), prevYear = _panel2$querySelector[0];
                   prevYear.click();
-                  _context7.next = 27;
+                  _context9.next = 27;
                   return wait();
                 case 27:
                   expect(monthValues1.textContent).to.eql(yearStart + "\u5E74" + monthStart + "\u6708");
@@ -236,7 +280,7 @@ describe('Datepicker', function () {
                   // year panel
                   dispatchEvent(monthValues1.firstElementChild, 'click');
                   dispatchEvent(monthValues2.firstElementChild, 'click');
-                  _context7.next = 33;
+                  _context9.next = 33;
                   return wait();
                 case 33:
                   firstDecadeStart = Math.floor(yearStart / 10) * 10;
@@ -244,133 +288,133 @@ describe('Datepicker', function () {
                   expect(monthValues1.textContent).to.eql(firstDecadeStart + "\u5E74 - " + (firstDecadeStart + 9) + "\u5E74");
                   expect(monthValues1.textContent).to.eql(secondDecadeStart + "\u5E74 - " + (secondDecadeStart + 9) + "\u5E74");
                   nextYear.click();
-                  _context7.next = 40;
+                  _context9.next = 40;
                   return wait();
                 case 40:
                   expect(monthValues1.textContent).to.eql(firstDecadeStart + 10 + "\u5E74 - " + (secondDecadeStart + 19) + "\u5E74");
                   expect(monthValues1.textContent).to.eql(secondDecadeStart + 10 + "\u5E74 - " + (secondDecadeStart + 19) + "\u5E74");
                 case 42:
                 case "end":
-                  return _context7.stop();
+                  return _context9.stop();
               }
-            }, _callee7);
+            }, _callee9);
           })));
-          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) {
+          it('range year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+            var _mount9, instance, element, _element$querySelecto3, select, content, _content$querySelecto3, panel1, panel2, _panel1$querySelector2, next, _panel2$querySelector2, prev, _content$querySelecto4, label1, label2;
+            return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+              while (1) switch (_context10.prev = _context10.next) {
                 case 0:
-                  _mount7 = mount(RangeDemo), instance = _mount7[0], element = _mount7[1];
+                  _mount9 = mount(RangeDemo), instance = _mount9[0], element = _mount9[1];
                   _element$querySelecto3 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto3[2];
                   select.click();
-                  _context8.next = 5;
+                  _context10.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];
+                  _content$querySelecto3 = content.querySelectorAll('.k-datepicker-calendar-time-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;
+                  _context10.next = 15;
                   return wait();
                 case 15:
                   expect(label1.textContent).to.eql(startYear + 10 + "\u5E74 - " + (startYear + 19) + "\u5E74");
                   expect(label2.textContent).to.eql(startYear + 20 + "\u5E74 - " + (startYear + 29) + "\u5E74");
                   prev.click();
-                  _context8.next = 20;
+                  _context10.next = 20;
                   return wait();
                 case 20:
                   expect(label1.textContent).to.eql(startYear + "\u5E74 - " + (startYear + 9) + "\u5E74");
                   expect(label2.textContent).to.eql(startYear + 10 + "\u5E74 - " + (startYear + 19) + "\u5E74");
                 case 22:
                 case "end":
-                  return _context8.stop();
+                  return _context10.stop();
               }
-            }, _callee8);
+            }, _callee10);
           })));
-          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) {
+          it('range month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+            var _mount10, instance, element, _element$querySelecto4, select, content, _content$querySelecto5, panel1, panel2, _panel1$querySelector3, next, _panel2$querySelector3, prev, _content$querySelecto6, label1, label2;
+            return _regeneratorRuntime.wrap(function _callee11$(_context11) {
+              while (1) switch (_context11.prev = _context11.next) {
                 case 0:
-                  _mount8 = mount(RangeDemo), instance = _mount8[0], element = _mount8[1];
+                  _mount10 = mount(RangeDemo), instance = _mount10[0], element = _mount10[1];
                   _element$querySelecto4 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto4[3];
                   select.click();
-                  _context9.next = 5;
+                  _context11.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];
+                  _content$querySelecto5 = content.querySelectorAll('.k-datepicker-calendar-time-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;
+                  _context11.next = 15;
                   return wait();
                 case 15:
                   expect(label1.textContent).to.eql(year + 1 + "\u5E74" + (month + 1) + "\u6708");
                   expect(label2.textContent).to.eql(year + 2 + "\u5E74" + (month + 1) + "\u6708");
                   prev.click();
-                  _context9.next = 20;
+                  _context11.next = 20;
                   return wait();
                 case 20:
                   expect(label1.textContent).to.eql(year + "\u5E74" + (month + 1) + "\u6708");
                   expect(label2.textContent).to.eql(year + 1 + "\u5E74" + (month + 1) + "\u6708");
                 case 22:
                 case "end":
-                  return _context9.stop();
+                  return _context11.stop();
               }
-            }, _callee9);
+            }, _callee11);
           })));
         case 4:
         case "end":
-          return _context10.stop();
+          return _context12.stop();
       }
-    }, _callee10);
+    }, _callee12);
   })));
   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) {
+    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+      var _mount11, instance, element;
+      return _regeneratorRuntime.wrap(function _callee13$(_context13) {
+        while (1) switch (_context13.prev = _context13.next) {
           case 0:
-            _mount9 = mount(ClearableDemo), instance = _mount9[0], element = _mount9[1];
+            _mount11 = mount(ClearableDemo), instance = _mount11[0], element = _mount11[1];
             instance.set('date', '2018-03-04');
-            _context11.next = 4;
+            _context13.next = 4;
             return wait();
           case 4:
             dispatchEvent(element.querySelector('.k-select-clear'), 'click');
             expect(instance.get('date')).be.eql(null);
           case 6:
           case "end":
-            return _context11.stop();
+            return _context13.stop();
         }
-      }, _callee11);
+      }, _callee13);
     })));
-    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) {
+    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+      var _mount12, instance, element, input, content;
+      return _regeneratorRuntime.wrap(function _callee14$(_context14) {
+        while (1) switch (_context14.prev = _context14.next) {
           case 0:
-            _mount10 = mount(DatetimeDemo), instance = _mount10[0], element = _mount10[1];
+            _mount12 = mount(DatetimeDemo), instance = _mount12[0], element = _mount12[1];
             input = element.querySelector('.k-input');
             input.click();
-            _context12.next = 5;
+            _context14.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content'); // change to time panel
             content.querySelector('.k-calendar-item').click();
-            _context12.next = 9;
+            _context14.next = 9;
             return wait();
           case 9:
             content.querySelector('.k-datepicker-footer .k-btn').click();
             // clear the value
-            _context12.next = 12;
+            _context14.next = 12;
             return wait();
           case 12:
             expect(instance.get('datetime1')).to.be.string;
@@ -378,7 +422,7 @@ describe('Datepicker', function () {
             expect(instance.get('datetime1')).be.eql(null);
             // set value to empty string should clear datetime
             input.click();
-            _context12.next = 18;
+            _context14.next = 18;
             return wait();
           case 18:
             content.querySelector('.k-calendar-item').click();
@@ -386,21 +430,21 @@ describe('Datepicker', function () {
             expect(instance.get('datetime1')).to.eql('');
           case 21:
           case "end":
-            return _context12.stop();
+            return _context14.stop();
         }
-      }, _callee12);
+      }, _callee14);
     })));
   });
   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) {
+    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+      var _mount13, instance, element, select, content, items, close;
+      return _regeneratorRuntime.wrap(function _callee15$(_context15) {
+        while (1) switch (_context15.prev = _context15.next) {
           case 0:
-            _mount11 = mount(MultipleDemo), instance = _mount11[0], element = _mount11[1];
+            _mount13 = mount(MultipleDemo), instance = _mount13[0], element = _mount13[1];
             select = element.querySelector('.k-datepicker');
             dispatchEvent(select, 'click');
-            _context13.next = 5;
+            _context15.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
@@ -410,19 +454,19 @@ describe('Datepicker', function () {
             expect(instance.get('date')).have.lengthOf(2);
             dispatchEvent(items[18], 'click');
             expect(instance.get('date')).have.lengthOf(1);
-            _context13.next = 14;
+            _context15.next = 14;
             return wait();
           case 14:
             // remove specified item
             close = element.querySelector('.k-tag-close');
             close.click();
             expect(instance.get('date')).have.lengthOf(0);
-            _context13.next = 19;
+            _context15.next = 19;
             return wait();
           case 19:
             dispatchEvent(items[17], 'click');
             expect(instance.get('date')).have.lengthOf(1);
-            _context13.next = 23;
+            _context15.next = 23;
             return wait();
           case 23:
             // clear
@@ -430,284 +474,206 @@ describe('Datepicker', function () {
             expect(instance.get('date')).have.lengthOf(0);
           case 25:
           case "end":
-            return _context13.stop();
+            return _context15.stop();
         }
-      }, _callee13);
+      }, _callee15);
     })));
-    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) {
+    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+      var _mount14, instance, element, _element$querySelecto5, select, content;
+      return _regeneratorRuntime.wrap(function _callee16$(_context16) {
+        while (1) switch (_context16.prev = _context16.next) {
           case 0:
-            _mount12 = mount(MultipleDemo), instance = _mount12[0], element = _mount12[1];
+            _mount14 = mount(MultipleDemo), instance = _mount14[0], element = _mount14[1];
             _element$querySelecto5 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto5[1];
             dispatchEvent(select, 'click');
-            _context14.next = 5;
+            _context16.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
-            _context14.next = 9;
+            _context16.next = 9;
             return wait();
           case 9:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.next = 12;
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
+            _context16.next = 12;
             return wait();
           case 12:
             expect(instance.get('datetime')).have.lengthOf(1);
             // select the same datetime
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
-            _context14.next = 16;
+            _context16.next = 16;
             return wait();
           case 16:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.next = 19;
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
+            _context16.next = 19;
             return wait();
           case 19:
             expect(instance.get('datetime')).have.lengthOf(1);
             // select different time with the same date
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
-            _context14.next = 23;
+            _context16.next = 23;
             return wait();
           case 23:
             dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
-            _context14.next = 26;
+            _context16.next = 26;
             return wait();
           case 26:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.next = 29;
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
+            _context16.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;
+            _context16.next = 33;
             return wait();
           case 33:
             instance.set('datetime', []);
-            _context14.next = 36;
+            _context16.next = 36;
             return wait();
           case 36:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.next = 39;
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
+            _context16.next = 39;
             return wait();
           case 39:
             expect(instance.get('datetime')).have.lengthOf(1);
           case 40:
           case "end":
-            return _context14.stop();
+            return _context16.stop();
         }
-      }, _callee14);
+      }, _callee16);
     })));
-    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) {
+    it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+      var _mount15, instance, element, _element$querySelecto6, select, content;
+      return _regeneratorRuntime.wrap(function _callee17$(_context17) {
+        while (1) switch (_context17.prev = _context17.next) {
           case 0:
-            _mount13 = mount(MultipleDemo), instance = _mount13[0], element = _mount13[1];
+            _mount15 = mount(MultipleDemo), instance = _mount15[0], element = _mount15[1];
             _element$querySelecto6 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto6[2];
             dispatchEvent(select, 'click');
-            _context15.next = 5;
+            _context17.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context15.next = 9;
+            _context17.next = 9;
             return wait();
           case 9:
             expect(instance.get('year')).have.lengthOf(1);
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(7)'), 'click');
-            _context15.next = 13;
+            _context17.next = 13;
             return wait();
           case 13:
             expect(instance.get('year')).have.lengthOf(2);
             instance.set('year', []);
-            _context15.next = 17;
+            _context17.next = 17;
             return wait();
           case 17:
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context15.next = 20;
+            _context17.next = 20;
             return wait();
           case 20:
             expect(instance.get('year')).have.lengthOf(1);
           case 21:
           case "end":
-            return _context15.stop();
+            return _context17.stop();
         }
-      }, _callee15);
+      }, _callee17);
     })));
-    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) {
+    it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+      var _mount16, instance, element, _element$querySelecto7, select, content;
+      return _regeneratorRuntime.wrap(function _callee18$(_context18) {
+        while (1) switch (_context18.prev = _context18.next) {
           case 0:
-            _mount14 = mount(MultipleDemo), instance = _mount14[0], element = _mount14[1];
+            _mount16 = mount(MultipleDemo), instance = _mount16[0], element = _mount16[1];
             _element$querySelecto7 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto7[3];
             dispatchEvent(select, 'click');
-            _context16.next = 5;
+            _context18.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context16.next = 9;
+            _context18.next = 9;
             return wait();
           case 9:
             expect(instance.get('month')).have.lengthOf(1);
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(7)'), 'click');
-            _context16.next = 13;
+            _context18.next = 13;
             return wait();
           case 13:
             expect(instance.get('month')).have.lengthOf(2);
             instance.set('month', []);
-            _context16.next = 17;
+            _context18.next = 17;
             return wait();
           case 17:
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context16.next = 20;
+            _context18.next = 20;
             return wait();
           case 20:
             expect(instance.get('month')).have.lengthOf(1);
           case 21:
           case "end":
-            return _context16.stop();
+            return _context18.stop();
         }
-      }, _callee16);
+      }, _callee18);
     })));
-    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) {
+    it('date range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+      var _mount17, instance, element, _element$querySelecto8, select, content, _content$querySelecto7, calendar1, calendar2, first, second;
+      return _regeneratorRuntime.wrap(function _callee19$(_context19) {
+        while (1) switch (_context19.prev = _context19.next) {
           case 0:
-            _mount15 = mount(MultipleDemo), instance = _mount15[0], element = _mount15[1];
+            _mount17 = mount(MultipleDemo), instance = _mount17[0], element = _mount17[1];
             _element$querySelecto8 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto8[4];
             dispatchEvent(select, 'click');
-            _context17.next = 5;
+            _context19.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];
+            _content$querySelecto7 = content.querySelectorAll('.k-datepicker-calendar-time-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;
+            _context19.next = 13;
             return wait();
           case 13:
             expect(instance.get('dateRange')).have.lengthOf(1);
             dispatchEvent(first.nextElementSibling, 'click');
             dispatchEvent(second.nextElementSibling, 'click');
-            _context17.next = 18;
+            _context19.next = 18;
             return wait();
           case 18:
             expect(instance.get('dateRange')).have.lengthOf(2);
             first.click();
             second.click();
-            _context17.next = 23;
+            _context19.next = 23;
             return wait();
           case 23:
             expect(instance.get('dateRange')).have.lengthOf(1);
             instance.set('dateRange', []);
-            _context17.next = 27;
+            _context19.next = 27;
             return wait();
           case 27:
             first.click();
             second.click();
-            _context17.next = 31;
+            _context19.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 _context18;
-      var _mount16, instance, element, _element$querySelecto9, select, content, _content$querySelecto8, calendar1, calendar2, values;
-      return _regeneratorRuntime.wrap(function _callee18$(_context19) {
-        while (1) switch (_context19.prev = _context19.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');
-            _context19.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();
-            _context19.next = 11;
-            return wait();
-          case 11:
-            content.querySelector('.k-btn').click();
-            _context19.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();
-            _context19.next = 19;
-            return wait();
-          case 19:
-            content.querySelector('.k-btn').click();
-            _context19.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();
-            _context19.next = 27;
-            return wait();
-          case 27:
-            content.querySelector('.k-btn').click();
-            _context19.next = 30;
-            return wait();
-          case 30:
-            expect(instance.get('datetimeRange')).have.lengthOf(2);
-            instance.set('datetimeRange', []);
-            _context19.next = 34;
-            return wait();
-          case 34:
-            calendar1.querySelectorAll('.k-calendar-item')[17].click();
-            calendar2.querySelectorAll('.k-calendar-item')[17].click();
-            _context19.next = 38;
-            return wait();
-          case 38:
-            content.querySelector('.k-btn').click();
-            _context19.next = 41;
-            return wait();
-          case 41:
-            expect(instance.get('datetimeRange')).have.lengthOf(1);
-            // select the first value in end panel
-            calendar2.querySelectorAll('.k-calendar-item')[17].click();
-            calendar2.querySelectorAll('.k-calendar-item')[17].click();
-            _context19.next = 46;
-            return wait();
-          case 46:
-            content.querySelector('.k-btn').click();
-            _context19.next = 49;
-            return wait();
-          case 49:
-            values = instance.get('datetimeRange');
-            expect(values).have.lengthOf(2);
-            expect(_includesInstanceProperty(_context18 = values[1][1]).call(_context18, '23:59:59')).to.be.true;
-          case 52:
           case "end":
             return _context19.stop();
         }
-      }, _callee18);
+      }, _callee19);
     })));
   });
   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$(_context20) {
+    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+      var _mount18, instance, element, select, content, first, value, value1, second;
+      return _regeneratorRuntime.wrap(function _callee20$(_context20) {
         while (1) switch (_context20.prev = _context20.next) {
           case 0:
-            _mount17 = mount(RangeDemo), instance = _mount17[0], element = _mount17[1]; // date
+            _mount18 = mount(RangeDemo), instance = _mount18[0], element = _mount18[1]; // date
             select = element.querySelector('.k-datepicker');
             select.click();
             _context20.next = 5;
@@ -773,7 +739,7 @@ describe('Datepicker', function () {
             return wait();
           case 49:
             first.click();
-            second = content.querySelector('.k-datepicker-calendar-wrapper:nth-child(2) .k-calendar-item:nth-child(19)');
+            second = content.querySelector('.k-datepicker-calendar-time-wrapper:nth-child(2) .k-calendar-item:nth-child(19)');
             second.click();
             _context20.next = 54;
             return wait();
@@ -783,63 +749,86 @@ describe('Datepicker', function () {
           case "end":
             return _context20.stop();
         }
-      }, _callee19);
+      }, _callee20);
     })));
-    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$(_context21) {
+    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+      var _mount19, instance, element, _element$querySelecto9, select, content;
+      return _regeneratorRuntime.wrap(function _callee21$(_context21) {
         while (1) switch (_context21.prev = _context21.next) {
           case 0:
-            _mount18 = mount(RangeDemo), instance = _mount18[0], element = _mount18[1];
-            _element$querySelecto10 = element.querySelectorAll('.k-datepicker'), datetime = _element$querySelecto10[1];
-            datetime.click();
+            _mount19 = mount(MultipleDemo), instance = _mount19[0], element = _mount19[1];
+            _element$querySelecto9 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto9[1];
+            dispatchEvent(select, 'click');
             _context21.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();
-            // should stay at date panel
+            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
+            _context21.next = 9;
+            return wait();
+          case 9:
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
             _context21.next = 12;
             return wait();
           case 12:
-            expect(calendar1.querySelector('.k-days')).be.exist;
-            second.click();
+            expect(instance.get('datetime')).have.lengthOf(1);
+            // select the same datetime
+            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
             _context21.next = 16;
             return wait();
           case 16:
-            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();
-            _context21.next = 21;
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
+            _context21.next = 19;
             return wait();
-          case 21:
-            value2 = instance.get('time');
-            expect(value2).have.lengthOf(2);
-            expect(_mapInstanceProperty(value2).call(value2, function (item) {
-              return item.split(' ')[1];
-            })).eql(['01:00:00', '22:59:59']);
-          case 24:
+          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');
+            _context21.next = 23;
+            return wait();
+          case 23:
+            dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
+            _context21.next = 26;
+            return wait();
+          case 26:
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
+            _context21.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');
+            _context21.next = 33;
+            return wait();
+          case 33:
+            instance.set('datetime', []);
+            _context21.next = 36;
+            return wait();
+          case 36:
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
+            _context21.next = 39;
+            return wait();
+          case 39:
+            expect(instance.get('datetime')).have.lengthOf(1);
+          case 40:
           case "end":
             return _context21.stop();
         }
-      }, _callee20);
+      }, _callee21);
     })));
-    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$(_context22) {
+    it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+      var _mount20, instance, element, _element$querySelecto10, select, content, _content$querySelecto8, calendar1, calendar2, first, second, value;
+      return _regeneratorRuntime.wrap(function _callee22$(_context22) {
         while (1) switch (_context22.prev = _context22.next) {
           case 0:
-            _mount19 = mount(RangeDemo), instance = _mount19[0], element = _mount19[1];
-            _element$querySelecto11 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto11[2];
+            _mount20 = mount(RangeDemo), instance = _mount20[0], element = _mount20[1];
+            _element$querySelecto10 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto10[2];
             select.click();
             _context22.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];
+            _content$querySelecto8 = content.querySelectorAll('.k-datepicker-calendar-time-wrapper'), calendar1 = _content$querySelecto8[0], calendar2 = _content$querySelecto8[1];
             first = calendar1.querySelector('.k-calendar-item:nth-child(2)');
             second = calendar2.querySelector('.k-calendar-item:nth-child(2)');
             first.click();
@@ -853,21 +842,21 @@ describe('Datepicker', function () {
           case "end":
             return _context22.stop();
         }
-      }, _callee21);
+      }, _callee22);
     })));
-    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$(_context23) {
+    it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+      var _mount21, instance, element, _element$querySelecto11, select, content, _content$querySelecto9, calendar1, calendar2, first, second, value;
+      return _regeneratorRuntime.wrap(function _callee23$(_context23) {
         while (1) switch (_context23.prev = _context23.next) {
           case 0:
-            _mount20 = mount(RangeDemo), instance = _mount20[0], element = _mount20[1];
-            _element$querySelecto12 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto12[3];
+            _mount21 = mount(RangeDemo), instance = _mount21[0], element = _mount21[1];
+            _element$querySelecto11 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto11[3];
             select.click();
             _context23.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];
+            _content$querySelecto9 = content.querySelectorAll('.k-datepicker-calendar-time-wrapper'), calendar1 = _content$querySelecto9[0], calendar2 = _content$querySelecto9[1];
             first = calendar1.querySelector('.k-calendar-item:nth-child(1)');
             second = calendar2.querySelector('.k-calendar-item:nth-child(1)');
             first.click();
@@ -881,17 +870,17 @@ describe('Datepicker', function () {
           case "end":
             return _context23.stop();
         }
-      }, _callee22);
+      }, _callee23);
     })));
   });
   describe('Keybord', function () {
-    it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+    it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
       var _context24;
-      var _mount21, instance, element, now, select, content;
-      return _regeneratorRuntime.wrap(function _callee23$(_context25) {
+      var _mount22, instance, element, now, select, content;
+      return _regeneratorRuntime.wrap(function _callee24$(_context25) {
         while (1) switch (_context25.prev = _context25.next) {
           case 0:
-            _mount21 = mount(BasicDemo), instance = _mount21[0], element = _mount21[1];
+            _mount22 = mount(BasicDemo), instance = _mount22[0], element = _mount22[1];
             now = new Date();
             select = element.querySelector('.k-datepicker');
             select.click();
@@ -959,14 +948,14 @@ describe('Datepicker', function () {
           case "end":
             return _context25.stop();
         }
-      }, _callee23);
+      }, _callee24);
     })));
-    it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
-      var _mount22, instance, element, select, value, _value;
-      return _regeneratorRuntime.wrap(function _callee24$(_context26) {
+    it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+      var _mount23, instance, element, select, value, _value;
+      return _regeneratorRuntime.wrap(function _callee25$(_context26) {
         while (1) switch (_context26.prev = _context26.next) {
           case 0:
-            _mount22 = mount(RangeDemo), instance = _mount22[0], element = _mount22[1];
+            _mount23 = mount(RangeDemo), instance = _mount23[0], element = _mount23[1];
             select = element.querySelector('.k-datepicker');
             select.click();
             _context26.next = 5;
@@ -1012,16 +1001,16 @@ describe('Datepicker', function () {
           case "end":
             return _context26.stop();
         }
-      }, _callee24);
+      }, _callee25);
     })));
   });
-  describe('Event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
-    return _regeneratorRuntime.wrap(function _callee26$(_context29) {
+  describe('Event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
+    return _regeneratorRuntime.wrap(function _callee27$(_context29) {
       while (1) switch (_context29.prev = _context29.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$(_context28) {
+          it('selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
+            var fn, Demo, _mount24, instance, element, content, calendar, first, second, firstDateItem, activeTimeItem, nextTimeItem, confirmBtn, endCalendar, endFirst, endSecond, endDateItem, endActiveTimeItem, endNextTimeItem, finalConfirmBtn;
+            return _regeneratorRuntime.wrap(function _callee26$(_context28) {
               while (1) switch (_context28.prev = _context28.next) {
                 case 0:
                   fn = sinon.spy(function (v) {
@@ -1046,53 +1035,65 @@ describe('Datepicker', function () {
                     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];
+                  _mount24 = mount(Demo), instance = _mount24[0], element = _mount24[1];
                   element.click();
                   _context28.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();
+                  calendar = content.querySelector('.k-datepicker-calendar-time-wrapper');
+                  first = calendar.querySelector('.k-datepicker-calendar');
+                  second = calendar.querySelector('.k-datepicker-time-wrapper');
+                  firstDateItem = first.querySelector('.k-calendar-item');
+                  firstDateItem.click();
                   expect(fn.callCount).to.eql(1);
                   expect(fn.lastCall.args[0]).have.lengthOf(1);
-                  second.click();
+                  activeTimeItem = second.querySelector('.k-scroll-select-wrapper .k-active');
+                  nextTimeItem = activeTimeItem.nextElementSibling;
+                  nextTimeItem.click();
                   expect(fn.callCount).to.eql(2);
-                  expect(fn.lastCall.args[0]).have.lengthOf(2);
-                  _context28.next = 19;
+                  expect(fn.lastCall.args[0]).have.lengthOf(1);
+                  confirmBtn = content.querySelector('.k-datepicker-footer .k-btn');
+                  confirmBtn.click();
+                  _context28.next = 24;
                   return wait();
-                case 19:
-                  dispatchEvent(calendar1.querySelector('.k-scroll-select-wrapper .k-active').nextElementSibling, 'click');
+                case 24:
+                  endCalendar = content.querySelector('.k-datepicker-calendar-time-wrapper');
+                  endFirst = endCalendar.querySelector('.k-datepicker-calendar');
+                  endSecond = endCalendar.querySelector('.k-datepicker-time-wrapper');
+                  endDateItem = endFirst.querySelector('.k-calendar-item');
+                  endDateItem.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.lastCall.args[0]).have.lengthOf(1);
+                  endActiveTimeItem = endSecond.querySelector('.k-scroll-select-wrapper .k-active');
+                  endNextTimeItem = endActiveTimeItem.nextElementSibling;
+                  endNextTimeItem.click();
                   expect(fn.callCount).to.eql(4);
-                  expect(fn.lastCall.args[0]).have.lengthOf(2);
-                  content.querySelector('.k-datepicker-footer .k-btn').click();
-                  _context28.next = 28;
+                  expect(fn.lastCall.args[0]).have.lengthOf(1);
+                  finalConfirmBtn = content.querySelector('.k-datepicker-footer .k-btn');
+                  finalConfirmBtn.click();
+                  _context28.next = 40;
                   return wait();
-                case 28:
+                case 40:
                   expect(fn.callCount).to.eql(4);
-                case 29:
+                case 41:
                 case "end":
                   return _context28.stop();
               }
-            }, _callee25);
+            }, _callee26);
           })));
         case 1:
         case "end":
           return _context29.stop();
       }
-    }, _callee26);
+    }, _callee27);
   })));
-  it('should disable some time pickers', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
-    var _mount24, instance, element, input, content;
-    return _regeneratorRuntime.wrap(function _callee27$(_context30) {
+  it('should disable some time pickers', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
+    var _mount25, instance, element, input, content;
+    return _regeneratorRuntime.wrap(function _callee28$(_context30) {
       while (1) switch (_context30.prev = _context30.next) {
         case 0:
-          _mount24 = mount(DatetimeDemo), instance = _mount24[0], element = _mount24[1];
+          _mount25 = mount(DatetimeDemo), instance = _mount25[0], element = _mount25[1];
           input = element.querySelectorAll('.k-input')[1];
           input.click();
           _context30.next = 5;
@@ -1110,15 +1111,15 @@ describe('Datepicker', function () {
         case "end":
           return _context30.stop();
       }
-    }, _callee27);
+    }, _callee28);
   })));
-  it('format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
-    var _mount25, instance, element, _element$querySelecto13, input1, input2, input3, content;
-    return _regeneratorRuntime.wrap(function _callee28$(_context31) {
+  it('format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
+    var _mount26, instance, element, _element$querySelecto12, input1, input2, input3, content;
+    return _regeneratorRuntime.wrap(function _callee29$(_context31) {
       while (1) switch (_context31.prev = _context31.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];
+          _mount26 = mount(FormatDemo), instance = _mount26[0], element = _mount26[1];
+          _element$querySelecto12 = element.querySelectorAll('.k-input-inner'), input1 = _element$querySelecto12[0], input2 = _element$querySelecto12[1], input3 = _element$querySelecto12[2];
           input1.click();
           _context31.next = 5;
           return wait();
@@ -1150,7 +1151,7 @@ describe('Datepicker', function () {
           _context31.next = 27;
           return wait();
         case 27:
-          content.querySelector('.k-btn').click();
+          content.querySelector('.k-datepicker-footer .k-btn').click();
           _context31.next = 30;
           return wait();
         case 30:
@@ -1160,15 +1161,15 @@ describe('Datepicker', function () {
         case "end":
           return _context31.stop();
       }
-    }, _callee28);
+    }, _callee29);
   })));
   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$(_context32) {
+    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
+      var _mount27, instance, element, now, content, dateDoms;
+      return _regeneratorRuntime.wrap(function _callee30$(_context32) {
         while (1) switch (_context32.prev = _context32.next) {
           case 0:
-            _mount26 = mount(MaxMinDemo), instance = _mount26[0], element = _mount26[1];
+            _mount27 = mount(MaxMinDemo), instance = _mount27[0], element = _mount27[1];
             now = dayjs().format('YYYY-MM-DD');
             instance.set('to', now);
             element.querySelector('.k-datepicker').click();
@@ -1183,14 +1184,14 @@ describe('Datepicker', function () {
           case "end":
             return _context32.stop();
         }
-      }, _callee29);
+      }, _callee30);
     })));
-    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
-      var _mount27, instance, element, now, content;
-      return _regeneratorRuntime.wrap(function _callee30$(_context33) {
+    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
+      var _mount28, instance, element, now, content;
+      return _regeneratorRuntime.wrap(function _callee31$(_context33) {
         while (1) switch (_context33.prev = _context33.next) {
           case 0:
-            _mount27 = mount(MaxMinDemo), instance = _mount27[0], element = _mount27[1];
+            _mount28 = mount(MaxMinDemo), instance = _mount28[0], element = _mount28[1];
             now = dayjs().format('YYYY-MM-DD') + '00:00:00';
             instance.set('toTime', now);
             element.querySelectorAll('.k-datepicker')[2].click();
@@ -1207,14 +1208,14 @@ describe('Datepicker', function () {
           case "end":
             return _context33.stop();
         }
-      }, _callee30);
+      }, _callee31);
     })));
-    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$(_context34) {
+    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 _callee32() {
+      var _mount29, instance, element, date, time, fromTime, endTimeTrigger, content;
+      return _regeneratorRuntime.wrap(function _callee32$(_context34) {
         while (1) switch (_context34.prev = _context34.next) {
           case 0:
-            _mount28 = mount(MaxMinDemo), instance = _mount28[0], element = _mount28[1];
+            _mount29 = mount(MaxMinDemo), instance = _mount29[0], element = _mount29[1];
             date = dayjs().format('YYYY-MM-DD');
             time = '01:00:00';
             fromTime = date + " " + time;
@@ -1229,7 +1230,7 @@ describe('Datepicker', function () {
             _context34.next = 13;
             return wait();
           case 13:
-            content.querySelector('.k-btn').click();
+            content.querySelector('.k-datepicker-footer .k-btn').click();
             _context34.next = 16;
             return wait();
           case 16:
@@ -1238,7 +1239,7 @@ describe('Datepicker', function () {
           case "end":
             return _context34.stop();
         }
-      }, _callee31);
+      }, _callee32);
     })));
   });
   describe('Input', function () {
@@ -1259,14 +1260,14 @@ describe('Datepicker', function () {
         return Demo;
       }(Component);
       Demo.template = "\n                    const {Datepicker} = this;\n                    " + template + "\n                ";
-      var _mount29 = mount(Demo),
-        instance = _mount29[0],
-        element = _mount29[1];
+      var _mount30 = mount(Demo),
+        instance = _mount30[0],
+        element = _mount30[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$(_context36) {
+        var _ref33 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33(value, result) {
+          return _regeneratorRuntime.wrap(function _callee33$(_context36) {
             while (1) switch (_context36.prev = _context36.next) {
               case 0:
                 input.value = value;
@@ -1279,16 +1280,16 @@ describe('Datepicker', function () {
               case "end":
                 return _context36.stop();
             }
-          }, _callee32);
+          }, _callee33);
         }));
         return function (_x, _x2) {
-          return _ref32.apply(this, arguments);
+          return _ref33.apply(this, arguments);
         };
       }();
     }
-    it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
+    it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee33$(_context37) {
+      return _regeneratorRuntime.wrap(function _callee34$(_context37) {
         while (1) switch (_context37.prev = _context37.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" max=\"2021-11-11\" min=\"2020-01-01\" />"); // input incorrect value
@@ -1307,11 +1308,11 @@ describe('Datepicker', function () {
           case "end":
             return _context37.stop();
         }
-      }, _callee33);
+      }, _callee34);
     })));
-    it('multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
+    it('multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee34$(_context38) {
+      return _regeneratorRuntime.wrap(function _callee35$(_context38) {
         while (1) switch (_context38.prev = _context38.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" multiple />"); // input incorrect value
@@ -1330,11 +1331,11 @@ describe('Datepicker', function () {
           case "end":
             return _context38.stop();
         }
-      }, _callee34);
+      }, _callee35);
     })));
-    it('range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
+    it('range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee35$(_context39) {
+      return _regeneratorRuntime.wrap(function _callee36$(_context39) {
         while (1) switch (_context39.prev = _context39.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" range max=\"2021-11-11\" min=\"2020-01-01\" />");
@@ -1352,7 +1353,7 @@ describe('Datepicker', function () {
             _context39.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();
+            expect(getElement('.k-datepicker-content').querySelector('.k-datepicker-calendar-time-wrapper:nth-child(1)').innerHTML).to.matchSnapshot();
             // clear value
             _context39.next = 13;
             return myTest('', null);
@@ -1363,11 +1364,11 @@ describe('Datepicker', function () {
           case "end":
             return _context39.stop();
         }
-      }, _callee35);
+      }, _callee36);
     })));
-    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
+    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee36$(_context40) {
+      return _regeneratorRuntime.wrap(function _callee37$(_context40) {
         while (1) switch (_context40.prev = _context40.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" type=\"datetime\" />");
@@ -1380,11 +1381,11 @@ describe('Datepicker', function () {
           case "end":
             return _context40.stop();
         }
-      }, _callee36);
+      }, _callee37);
     })));
-    it('datetime range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
+    it('datetime range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee37$(_context41) {
+      return _regeneratorRuntime.wrap(function _callee38$(_context41) {
         while (1) switch (_context41.prev = _context41.next) {
           case 0:
             myTest = test('<Datepicker v-model="value" type="datetime" range />');
@@ -1400,11 +1401,11 @@ describe('Datepicker', function () {
           case "end":
             return _context41.stop();
         }
-      }, _callee37);
+      }, _callee38);
     })));
-    it('date format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
+    it('date format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee39() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee38$(_context42) {
+      return _regeneratorRuntime.wrap(function _callee39$(_context42) {
         while (1) switch (_context42.prev = _context42.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" showFormat=\"YYYY\u5E74M\u6708D\u65E5\" />");
@@ -1414,7 +1415,7 @@ describe('Datepicker', function () {
           case "end":
             return _context42.stop();
         }
-      }, _callee38);
+      }, _callee39);
     })));
   });
 });