@king-design/react 3.5.2 → 3.6.0

package/components/datepicker/index.spec.js

@@ -1,17 +1,17 @@
 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 _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+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 { mount, dispatchEvent, wait, getElement } from '../../test/utils';
 import { Component } from 'intact-react';
 import { Datepicker } from './';
 import FormatDemo from '~/components/datepicker/demos/format';
@@ -21,75 +21,189 @@ 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) {
+var dateString = dayjs(now).format('YYYY-MM-DD');
+function clickConfirm(_x) {
+  return _clickConfirm.apply(this, arguments);
+}
+function _clickConfirm() {
+  _clickConfirm = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee60(content) {
+    var confirm;
+    return _regeneratorRuntime.wrap(function _callee60$(_context63) {
+      while (1) switch (_context63.prev = _context63.next) {
         case 0:
-          unmount();
-          _context.next = 3;
-          return wait(500);
-        case 3:
+          _context63.next = 2;
+          return wait();
+        case 2:
+          confirm = content.querySelector('.k-datepicker-footer .k-btn');
+          confirm.click();
+          _context63.next = 6;
+          return wait();
+        case 6:
+          return _context63.abrupt("return", confirm);
+        case 7:
         case "end":
-          return _context.stop();
+          return _context63.stop();
       }
-    }, _callee);
-  })));
+    }, _callee60);
+  }));
+  return _clickConfirm.apply(this, arguments);
+}
+function checkDisplay(content, isShow) {
+  var className = content.className;
+  var isLeave = _includesInstanceProperty(className).call(className, '-leave-');
+  expect(isLeave).eql(!isShow);
+}
+function getDateString(date) {
+  return dayjs(now).date(date).format('YYYY-MM-DD');
+}
+describe('Datepicker', function () {
+  // afterEach(async () => {
+  // unmount();
+  // await wait(500);
+  // });
   describe('Pick', function () {
-    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
       var _mount, instance, element, input, content;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
           case 0:
             _mount = mount(BasicDemo), instance = _mount[0], element = _mount[1];
             input = element.querySelector('.k-input');
             input.click();
-            _context2.next = 5;
+            _context.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;
+            _context.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:
+            expect(instance.get('date')).to.be.string;
+            checkDisplay(content, false);
+          case 11:
           case "end":
-            return _context3.stop();
+            return _context.stop();
         }
-      }, _callee3);
+      }, _callee);
     })));
-    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) {
+    describe('datetime', function () {
+      it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+        var _mount2, instance, element, input, content;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _mount2 = mount(DatetimeDemo), instance = _mount2[0], element = _mount2[1];
+              input = element.querySelector('.k-input');
+              input.click();
+              _context2.next = 5;
+              return wait();
+            case 5:
+              content = getElement('.k-datepicker-content'); // change to time panel
+              content.querySelector('.k-calendar-item').click();
+              _context2.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 _context2.stop();
+          }
+        }, _callee2);
+      })));
+      it('skip select date and select time directly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+        var _mount3, instance, element, input, content, show, _show, inputInner, confirm, activeHour;
+        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              _show = function _show3() {
+                _show = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+                  return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+                    while (1) switch (_context3.prev = _context3.next) {
+                      case 0:
+                        input.click();
+                        _context3.next = 3;
+                        return wait();
+                      case 3:
+                        content = getElement('.k-datepicker-content');
+                      case 4:
+                      case "end":
+                        return _context3.stop();
+                    }
+                  }, _callee3);
+                }));
+                return _show.apply(this, arguments);
+              };
+              show = function _show2() {
+                return _show.apply(this, arguments);
+              };
+              _mount3 = mount(DatetimeDemo), instance = _mount3[0], element = _mount3[1];
+              input = element.querySelector('.k-input');
+              _context4.next = 6;
+              return show();
+            case 6:
+              dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
+              _context4.next = 9;
+              return wait();
+            case 9:
+              inputInner = input.querySelector('.k-input-inner');
+              expect(inputInner.value).eql(dateString + " 15:00:00");
+              expect(instance.get('datetime1')).eql(null);
+              // hide to reset selected state
+              document.body.click();
+              _context4.next = 15;
+              return wait();
+            case 15:
+              expect(inputInner.getAttribute('placeholder')).eql("\u8BF7\u9009\u62E9\u65E5\u671F\u548C\u65F6\u95F4");
+              expect(inputInner.value).eql('');
+              expect(instance.get('datetime1')).eql(null);
+              // show again
+              _context4.next = 20;
+              return show();
+            case 20:
+              dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
+              _context4.next = 23;
+              return wait();
+            case 23:
+              confirm = content.querySelector('.k-datepicker-footer .k-btn');
+              confirm.click();
+              _context4.next = 27;
+              return wait();
+            case 27:
+              expect(inputInner.value).eql(dateString + " 15:00:00");
+              expect(instance.get('datetime1')).eql(dateString + " 15:00:00");
+              checkDisplay(content, false);
+              // change time
+              _context4.next = 32;
+              return show();
+            case 32:
+              activeHour = content.querySelector('.k-scroll-select-item.k-active');
+              dispatchEvent(activeHour.nextElementSibling, 'click');
+              _context4.next = 36;
+              return wait();
+            case 36:
+              confirm.click();
+              _context4.next = 39;
+              return wait();
+            case 39:
+              expect(instance.get('datetime1')).eql(dateString + " 16:00:00");
+            case 40:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      })));
+    });
+    it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+      var _mount4, instance, element, _element$querySelecto, yearInput, content, yearDom, nextYearDom;
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
           case 0:
-            _mount3 = mount(YearMonthDemo), instance = _mount3[0], element = _mount3[1];
+            _mount4 = mount(YearMonthDemo), instance = _mount4[0], element = _mount4[1];
             _element$querySelecto = element.querySelectorAll('.k-input'), yearInput = _element$querySelecto[0]; // year
             yearInput.click();
-            _context4.next = 5;
+            _context5.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
@@ -99,19 +213,19 @@ describe('Datepicker', function () {
             expect(instance.get('year') - 1).eql(year);
           case 10:
           case "end":
-            return _context4.stop();
+            return _context5.stop();
         }
-      }, _callee4);
+      }, _callee5);
     })));
-    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) {
+    it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+      var _mount5, instance, element, _element$querySelecto2, monthInput, content, monthDom, _instance$get$split, _year, _month;
+      return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
           case 0:
-            _mount4 = mount(YearMonthDemo), instance = _mount4[0], element = _mount4[1];
+            _mount5 = mount(YearMonthDemo), instance = _mount5[0], element = _mount5[1];
             _element$querySelecto2 = element.querySelectorAll('.k-input'), monthInput = _element$querySelecto2[1]; // month
             monthInput.click();
-            _context5.next = 5;
+            _context6.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
@@ -122,24 +236,69 @@ describe('Datepicker', function () {
             expect(+_month - 1).eql(month);
           case 11:
           case "end":
-            return _context5.stop();
+            return _context6.stop();
         }
-      }, _callee5);
+      }, _callee6);
+    })));
+    it('week', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+      var _mount6, instance, element, inputs, weekInput, content, weekItem;
+      return _regeneratorRuntime.wrap(function _callee7$(_context7) {
+        while (1) switch (_context7.prev = _context7.next) {
+          case 0:
+            _mount6 = mount(YearMonthDemo), instance = _mount6[0], element = _mount6[1];
+            inputs = element.querySelectorAll('.k-input');
+            weekInput = inputs[2];
+            weekInput.click();
+            _context7.next = 6;
+            return wait();
+          case 6:
+            content = getElement('.k-datepicker-content');
+            weekItem = content.querySelector('.week-row:nth-child(1) .k-week-number');
+            weekItem.click();
+            expect(instance.get('week')).to.match(/^\d{4}-\d+周$/);
+          case 10:
+          case "end":
+            return _context7.stop();
+        }
+      }, _callee7);
+    })));
+    it('quarter', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+      var _mount7, instance, element, inputs, QuarterInput, content, quarterItem;
+      return _regeneratorRuntime.wrap(function _callee8$(_context8) {
+        while (1) switch (_context8.prev = _context8.next) {
+          case 0:
+            _mount7 = mount(YearMonthDemo), instance = _mount7[0], element = _mount7[1];
+            inputs = element.querySelectorAll('.k-input');
+            QuarterInput = inputs[3];
+            QuarterInput.click();
+            _context8.next = 6;
+            return wait();
+          case 6:
+            content = getElement('.k-datepicker-content'); // 选择第一个季度  
+            quarterItem = content.querySelector('.k-calendar-item:nth-child(1)');
+            quarterItem.click();
+            // 验证输入框的值是否包含Q1
+            expect(instance.get('quarter')).to.include('Q1');
+          case 10:
+          case "end":
+            return _context8.stop();
+        }
+      }, _callee8);
     })));
   });
-  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 _callee13() {
+    return _regeneratorRuntime.wrap(function _callee13$(_context13) {
+      while (1) switch (_context13.prev = _context13.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 _callee9() {
+            var _mount8, instance, element, input, content, _Array$from, prevYear, prevMonth, _Array$from3, nextMonth, nextYear, curDate, _Array$from4, yearDom, monthDom, curDate1, curMonth;
+            return _regeneratorRuntime.wrap(function _callee9$(_context9) {
+              while (1) switch (_context9.prev = _context9.next) {
                 case 0:
-                  _mount5 = mount(BasicDemo), instance = _mount5[0], element = _mount5[1];
+                  _mount8 = mount(BasicDemo), instance = _mount8[0], element = _mount8[1];
                   input = element.querySelector('.k-input');
                   input.click();
-                  _context6.next = 5;
+                  _context9.next = 5;
                   return wait();
                 case 5:
                   content = getElement('.k-datepicker-content');
@@ -154,7 +313,7 @@ describe('Datepicker', function () {
                   dispatchEvent(nextMonth, 'click');
                   // click next year once
                   dispatchEvent(nextYear, 'click');
-                  _context6.next = 16;
+                  _context9.next = 16;
                   return wait();
                 case 16:
                   // select the middle date
@@ -166,21 +325,21 @@ describe('Datepicker', function () {
                   expect(curDate.getMonth()).be.eql(month);
                   // change year and month in year/month panel
                   input.click();
-                  _context6.next = 25;
+                  _context9.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;
+                  _context9.next = 30;
                   return wait();
                 case 30:
                   content.querySelector('.k-today').click();
-                  _context6.next = 33;
+                  _context9.next = 33;
                   return wait();
                 case 33:
                   content.querySelector('.k-today').click();
-                  _context6.next = 36;
+                  _context9.next = 36;
                   return wait();
                 case 36:
                   // select the middle date
@@ -191,23 +350,23 @@ describe('Datepicker', function () {
                   expect(curDate1.getFullYear()).be.eql(year);
                 case 41:
                 case "end":
-                  return _context6.stop();
+                  return _context9.stop();
               }
-            }, _callee6);
+            }, _callee9);
           })));
-          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 _callee10() {
+            var _mount9, instance, element, select, content, _content$querySelecto, panel1, panel2, _panel1$querySelector, nextMonth, nextYear, _content$querySelecto2, monthValues1, monthValues2, monthStart, yearStart, monthEnd, yearEnd, _panel2$querySelector, prevYear, firstDecadeStart, secondDecadeStart;
+            return _regeneratorRuntime.wrap(function _callee10$(_context10) {
+              while (1) switch (_context10.prev = _context10.next) {
                 case 0:
-                  _mount6 = mount(RangeDemo), instance = _mount6[0], element = _mount6[1];
+                  _mount9 = mount(RangeDemo), instance = _mount9[0], element = _mount9[1];
                   select = element.querySelector('.k-datepicker');
                   select.click();
-                  _context7.next = 5;
+                  _context10.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 +374,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;
+                  _context10.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;
+                  _context10.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;
+                  _context10.next = 27;
                   return wait();
                 case 27:
                   expect(monthValues1.textContent).to.eql(yearStart + "\u5E74" + monthStart + "\u6708");
@@ -236,7 +395,7 @@ describe('Datepicker', function () {
                   // year panel
                   dispatchEvent(monthValues1.firstElementChild, 'click');
                   dispatchEvent(monthValues2.firstElementChild, 'click');
-                  _context7.next = 33;
+                  _context10.next = 33;
                   return wait();
                 case 33:
                   firstDecadeStart = Math.floor(yearStart / 10) * 10;
@@ -244,133 +403,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;
+                  _context10.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 _context10.stop();
               }
-            }, _callee7);
+            }, _callee10);
           })));
-          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 _callee11() {
+            var _mount10, instance, element, _element$querySelecto3, select, content, _content$querySelecto3, panel1, panel2, _panel1$querySelector2, next, _panel2$querySelector2, prev, _content$querySelecto4, label1, label2;
+            return _regeneratorRuntime.wrap(function _callee11$(_context11) {
+              while (1) switch (_context11.prev = _context11.next) {
                 case 0:
-                  _mount7 = mount(RangeDemo), instance = _mount7[0], element = _mount7[1];
+                  _mount10 = mount(RangeDemo), instance = _mount10[0], element = _mount10[1];
                   _element$querySelecto3 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto3[2];
                   select.click();
-                  _context8.next = 5;
+                  _context11.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;
+                  _context11.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;
+                  _context11.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 _context11.stop();
               }
-            }, _callee8);
+            }, _callee11);
           })));
-          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 _callee12() {
+            var _mount11, instance, element, _element$querySelecto4, select, content, _content$querySelecto5, panel1, panel2, _panel1$querySelector3, next, _panel2$querySelector3, prev, _content$querySelecto6, label1, label2;
+            return _regeneratorRuntime.wrap(function _callee12$(_context12) {
+              while (1) switch (_context12.prev = _context12.next) {
                 case 0:
-                  _mount8 = mount(RangeDemo), instance = _mount8[0], element = _mount8[1];
+                  _mount11 = mount(RangeDemo), instance = _mount11[0], element = _mount11[1];
                   _element$querySelecto4 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto4[3];
                   select.click();
-                  _context9.next = 5;
+                  _context12.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;
+                  _context12.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;
+                  _context12.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 _context12.stop();
               }
-            }, _callee9);
+            }, _callee12);
           })));
         case 4:
         case "end":
-          return _context10.stop();
+          return _context13.stop();
       }
-    }, _callee10);
+    }, _callee13);
   })));
   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 _callee14() {
+      var _mount12, instance, element;
+      return _regeneratorRuntime.wrap(function _callee14$(_context14) {
+        while (1) switch (_context14.prev = _context14.next) {
           case 0:
-            _mount9 = mount(ClearableDemo), instance = _mount9[0], element = _mount9[1];
+            _mount12 = mount(ClearableDemo), instance = _mount12[0], element = _mount12[1];
             instance.set('date', '2018-03-04');
-            _context11.next = 4;
+            _context14.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 _context14.stop();
         }
-      }, _callee11);
+      }, _callee14);
     })));
-    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 _callee15() {
+      var _mount13, instance, element, input, content;
+      return _regeneratorRuntime.wrap(function _callee15$(_context15) {
+        while (1) switch (_context15.prev = _context15.next) {
           case 0:
-            _mount10 = mount(DatetimeDemo), instance = _mount10[0], element = _mount10[1];
+            _mount13 = mount(DatetimeDemo), instance = _mount13[0], element = _mount13[1];
             input = element.querySelector('.k-input');
             input.click();
-            _context12.next = 5;
+            _context15.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content'); // change to time panel
             content.querySelector('.k-calendar-item').click();
-            _context12.next = 9;
+            _context15.next = 9;
             return wait();
           case 9:
             content.querySelector('.k-datepicker-footer .k-btn').click();
             // clear the value
-            _context12.next = 12;
+            _context15.next = 12;
             return wait();
           case 12:
             expect(instance.get('datetime1')).to.be.string;
@@ -378,7 +537,7 @@ describe('Datepicker', function () {
             expect(instance.get('datetime1')).be.eql(null);
             // set value to empty string should clear datetime
             input.click();
-            _context12.next = 18;
+            _context15.next = 18;
             return wait();
           case 18:
             content.querySelector('.k-calendar-item').click();
@@ -386,21 +545,21 @@ describe('Datepicker', function () {
             expect(instance.get('datetime1')).to.eql('');
           case 21:
           case "end":
-            return _context12.stop();
+            return _context15.stop();
         }
-      }, _callee12);
+      }, _callee15);
     })));
   });
   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 _callee16() {
+      var _mount14, instance, element, select, content, items, close;
+      return _regeneratorRuntime.wrap(function _callee16$(_context16) {
+        while (1) switch (_context16.prev = _context16.next) {
           case 0:
-            _mount11 = mount(MultipleDemo), instance = _mount11[0], element = _mount11[1];
+            _mount14 = mount(MultipleDemo), instance = _mount14[0], element = _mount14[1];
             select = element.querySelector('.k-datepicker');
             dispatchEvent(select, 'click');
-            _context13.next = 5;
+            _context16.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
@@ -410,19 +569,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;
+            _context16.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;
+            _context16.next = 19;
             return wait();
           case 19:
             dispatchEvent(items[17], 'click');
             expect(instance.get('date')).have.lengthOf(1);
-            _context13.next = 23;
+            _context16.next = 23;
             return wait();
           case 23:
             // clear
@@ -430,479 +589,1061 @@ describe('Datepicker', function () {
             expect(instance.get('date')).have.lengthOf(0);
           case 25:
           case "end":
-            return _context13.stop();
+            return _context16.stop();
         }
-      }, _callee13);
+      }, _callee16);
     })));
-    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 _callee17() {
+      var _mount15, instance, element, _element$querySelecto5, select, content, activeHour, confirm;
+      return _regeneratorRuntime.wrap(function _callee17$(_context17) {
+        while (1) switch (_context17.prev = _context17.next) {
           case 0:
-            _mount12 = mount(MultipleDemo), instance = _mount12[0], element = _mount12[1];
+            _mount15 = mount(MultipleDemo), instance = _mount15[0], element = _mount15[1];
             _element$querySelecto5 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto5[1];
             dispatchEvent(select, 'click');
-            _context14.next = 5;
+            _context17.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)'), 'click');
-            _context14.next = 9;
+            _context17.next = 9;
             return wait();
           case 9:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.next = 12;
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
+            _context17.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;
+            _context17.next = 16;
             return wait();
           case 16:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.next = 19;
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
+            _context17.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;
+            _context17.next = 23;
             return wait();
           case 23:
             dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
-            _context14.next = 26;
+            _context17.next = 26;
             return wait();
           case 26:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.next = 29;
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn'), 'click');
+            _context17.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;
+            // select time directly
+            activeHour = content.querySelector('.k-scroll-select-item.k-active');
+            dispatchEvent(activeHour.nextElementSibling, 'click');
+            _context17.next = 34;
             return wait();
+          case 34:
+            _context17.next = 36;
+            return clickConfirm(content);
           case 36:
-            dispatchEvent(content.querySelector('.k-btn'), 'click');
-            _context14.next = 39;
+            confirm = _context17.sent;
+            expect(instance.get('datetime')).have.lengthOf(3);
+            // select time firstly, then select date should only add one value
+            dispatchEvent(activeHour.nextElementSibling.nextElementSibling, 'click');
+            _context17.next = 41;
             return wait();
-          case 39:
-            expect(instance.get('datetime')).have.lengthOf(1);
-          case 40:
+          case 41:
+            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(19)'), 'click');
+            _context17.next = 44;
+            return wait();
+          case 44:
+            confirm.click();
+            _context17.next = 47;
+            return wait();
+          case 47:
+            expect(instance.get('datetime')).have.lengthOf(4);
+          case 48:
           case "end":
-            return _context14.stop();
+            return _context17.stop();
         }
-      }, _callee14);
+      }, _callee17);
     })));
-    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 _callee18() {
+      var _mount16, instance, element, _element$querySelecto6, select, content;
+      return _regeneratorRuntime.wrap(function _callee18$(_context18) {
+        while (1) switch (_context18.prev = _context18.next) {
           case 0:
-            _mount13 = mount(MultipleDemo), instance = _mount13[0], element = _mount13[1];
+            _mount16 = mount(MultipleDemo), instance = _mount16[0], element = _mount16[1];
             _element$querySelecto6 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto6[2];
             dispatchEvent(select, 'click');
-            _context15.next = 5;
+            _context18.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context15.next = 9;
+            _context18.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;
+            _context18.next = 13;
             return wait();
           case 13:
             expect(instance.get('year')).have.lengthOf(2);
             instance.set('year', []);
-            _context15.next = 17;
+            _context18.next = 17;
             return wait();
           case 17:
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context15.next = 20;
+            _context18.next = 20;
             return wait();
           case 20:
             expect(instance.get('year')).have.lengthOf(1);
           case 21:
           case "end":
-            return _context15.stop();
+            return _context18.stop();
         }
-      }, _callee15);
+      }, _callee18);
     })));
-    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 _callee19() {
+      var _mount17, instance, element, _element$querySelecto7, select, content;
+      return _regeneratorRuntime.wrap(function _callee19$(_context19) {
+        while (1) switch (_context19.prev = _context19.next) {
           case 0:
-            _mount14 = mount(MultipleDemo), instance = _mount14[0], element = _mount14[1];
+            _mount17 = mount(MultipleDemo), instance = _mount17[0], element = _mount17[1];
             _element$querySelecto7 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto7[3];
             dispatchEvent(select, 'click');
-            _context16.next = 5;
+            _context19.next = 5;
             return wait();
           case 5:
             content = getElement('.k-datepicker-content');
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context16.next = 9;
+            _context19.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;
+            _context19.next = 13;
             return wait();
           case 13:
             expect(instance.get('month')).have.lengthOf(2);
             instance.set('month', []);
-            _context16.next = 17;
+            _context19.next = 17;
             return wait();
           case 17:
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(6)'), 'click');
-            _context16.next = 20;
+            _context19.next = 20;
             return wait();
           case 20:
             expect(instance.get('month')).have.lengthOf(1);
           case 21:
           case "end":
-            return _context16.stop();
+            return _context19.stop();
         }
-      }, _callee16);
+      }, _callee19);
     })));
-    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) {
+    describe('date range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+      return _regeneratorRuntime.wrap(function _callee22$(_context22) {
+        while (1) switch (_context22.prev = _context22.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:
+            it('date range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+              var _mount18, instance, element, _element$querySelecto8, select, content, _content$querySelecto7, calendar1, calendar2, first, second, value1, third, fourth, value2;
+              return _regeneratorRuntime.wrap(function _callee20$(_context20) {
+                while (1) switch (_context20.prev = _context20.next) {
+                  case 0:
+                    _mount18 = mount(MultipleDemo), instance = _mount18[0], element = _mount18[1];
+                    _element$querySelecto8 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto8[4];
+                    dispatchEvent(select, 'click');
+                    _context20.next = 5;
+                    return wait();
+                  case 5:
+                    content = getElement('.k-datepicker-content');
+                    _content$querySelecto7 = content.querySelectorAll('.k-datepicker-calendar-time-wrapper'), calendar1 = _content$querySelecto7[0], calendar2 = _content$querySelecto7[1];
+                    first = calendar1.querySelector('.k-calendar-item:not(.k-exceed)');
+                    second = first.nextElementSibling;
+                    first.click();
+                    second.click();
+                    _context20.next = 13;
+                    return wait();
+                  case 13:
+                    value1 = ["" + getDateString(1), "" + getDateString(2)];
+                    expect(instance.get('dateRange')).eql([value1]);
+                    third = second.nextElementSibling;
+                    fourth = third.nextElementSibling;
+                    third.click();
+                    fourth.click();
+                    _context20.next = 21;
+                    return wait();
+                  case 21:
+                    value2 = ["" + getDateString(3), "" + getDateString(4)];
+                    expect(instance.get('dateRange')).eql([value1, value2]);
+                    first.click();
+                    second.click();
+                    _context20.next = 27;
+                    return wait();
+                  case 27:
+                    expect(instance.get('dateRange')).eql([value2]);
+                    instance.set('dateRange', []);
+                    _context20.next = 31;
+                    return wait();
+                  case 31:
+                    first.click();
+                    second.click();
+                    _context20.next = 35;
+                    return wait();
+                  case 35:
+                    expect(instance.get('dateRange')).eql([value1]);
+                  case 36:
+                  case "end":
+                    return _context20.stop();
+                }
+              }, _callee20);
+            })));
+            it('hover status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+              var _mount19, instance, element, _element$querySelecto9, select, content, _content$querySelecto8, calendar1, calendar2, first, second;
+              return _regeneratorRuntime.wrap(function _callee21$(_context21) {
+                while (1) switch (_context21.prev = _context21.next) {
+                  case 0:
+                    _mount19 = mount(MultipleDemo), instance = _mount19[0], element = _mount19[1];
+                    instance.set('dateRange', [['2025-07-11', '2025-07-15']]);
+                    _element$querySelecto9 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto9[4];
+                    dispatchEvent(select, 'click');
+                    _context21.next = 6;
+                    return wait();
+                  case 6:
+                    content = getElement('.k-datepicker-content');
+                    _content$querySelecto8 = content.querySelectorAll('.k-datepicker-calendar-time-wrapper'), calendar1 = _content$querySelecto8[0], calendar2 = _content$querySelecto8[1];
+                    first = calendar1.querySelector('.k-calendar-item:not(.k-exceed)');
+                    second = first.nextElementSibling;
+                    dispatchEvent(first, 'mouseenter');
+                    _context21.next = 13;
+                    return wait();
+                  case 13:
+                    expect(second.classList.contains('k-in-range')).eql(false);
+                  case 14:
+                  case "end":
+                    return _context21.stop();
+                }
+              }, _callee21);
+            })));
+          case 2:
           case "end":
-            return _context17.stop();
+            return _context22.stop();
         }
-      }, _callee17);
+      }, _callee22);
     })));
-    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) {
+    describe('datetime range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+      return _regeneratorRuntime.wrap(function _callee25$(_context25) {
+        while (1) switch (_context25.prev = _context25.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:
+            it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+              var _mount20, instance, element, _element$querySelecto10, select, content, calendar1, first, second, inputInner, value1, third, fourth, value2, confirm;
+              return _regeneratorRuntime.wrap(function _callee23$(_context23) {
+                while (1) switch (_context23.prev = _context23.next) {
+                  case 0:
+                    _mount20 = mount(MultipleDemo), instance = _mount20[0], element = _mount20[1];
+                    _element$querySelecto10 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto10[5];
+                    dispatchEvent(select, 'click');
+                    _context23.next = 5;
+                    return wait();
+                  case 5:
+                    content = getElement('.k-datepicker-content');
+                    calendar1 = content.querySelector('.k-datepicker-wrapper');
+                    first = calendar1.querySelector('.k-calendar-item:not(.k-exceed)');
+                    second = first.nextElementSibling;
+                    inputInner = select.querySelector('.k-input-inner');
+                    first.click();
+                    _context23.next = 13;
+                    return clickConfirm(content);
+                  case 13:
+                    expect(inputInner.value).eql(getDateString(1) + " 00:00:00 ~");
+                    second.click();
+                    _context23.next = 17;
+                    return wait();
+                  case 17:
+                    expect(inputInner.value).eql(getDateString(1) + " 00:00:00 ~ " + getDateString(2) + " 00:00:00");
+                    _context23.next = 20;
+                    return clickConfirm(content);
+                  case 20:
+                    value1 = [getDateString(1) + " 00:00:00", getDateString(2) + " 00:00:00"];
+                    expect(instance.get('datetimeRange')).eql([value1]);
+                    third = second.nextElementSibling;
+                    fourth = third.nextElementSibling;
+                    third.click();
+                    _context23.next = 27;
+                    return clickConfirm(content);
+                  case 27:
+                    fourth.click();
+                    _context23.next = 30;
+                    return clickConfirm(content);
+                  case 30:
+                    value2 = [getDateString(3) + " 00:00:00", getDateString(4) + " 00:00:00"];
+                    expect(instance.get('datetimeRange')).eql([value1, value2]);
+                    // selecting the same date time will do nothing
+                    third.click();
+                    _context23.next = 35;
+                    return clickConfirm(content);
+                  case 35:
+                    fourth.click();
+                    _context23.next = 38;
+                    return clickConfirm(content);
+                  case 38:
+                    expect(instance.get('datetimeRange')).eql([value1, value2]);
+                    instance.set('datetimeRange', []);
+                    _context23.next = 42;
+                    return wait();
+                  case 42:
+                    first.click();
+                    _context23.next = 45;
+                    return clickConfirm(content);
+                  case 45:
+                    second.click();
+                    _context23.next = 48;
+                    return clickConfirm(content);
+                  case 48:
+                    confirm = _context23.sent;
+                    expect(instance.get('datetimeRange')).eql([value1]);
+                    expect(confirm.classList.contains('k-disabled')).eql(true);
+                  case 51:
+                  case "end":
+                    return _context23.stop();
+                }
+              }, _callee23);
+            })));
+            it('select time directly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+              var _mount21, instance, element, _element$querySelecto11, select, content, calendar, activeHour;
+              return _regeneratorRuntime.wrap(function _callee24$(_context24) {
+                while (1) switch (_context24.prev = _context24.next) {
+                  case 0:
+                    _mount21 = mount(MultipleDemo), instance = _mount21[0], element = _mount21[1];
+                    _element$querySelecto11 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto11[5];
+                    dispatchEvent(select, 'click');
+                    _context24.next = 5;
+                    return wait();
+                  case 5:
+                    content = getElement('.k-datepicker-content');
+                    calendar = content.querySelector('.k-datepicker-wrapper');
+                    activeHour = calendar.querySelector('.k-scroll-select-item.k-active');
+                    activeHour.nextElementSibling.click();
+                    _context24.next = 11;
+                    return clickConfirm(content);
+                  case 11:
+                    activeHour.nextElementSibling.click();
+                    _context24.next = 14;
+                    return clickConfirm(content);
+                  case 14:
+                    expect(instance.get('datetimeRange')).to.eql([[dateString + " 01:00:00", dateString + " 02:00:00"]]);
+                  case 15:
+                  case "end":
+                    return _context24.stop();
+                }
+              }, _callee24);
+            })));
+          case 2:
           case "end":
-            return _context19.stop();
+            return _context25.stop();
         }
-      }, _callee18);
+      }, _callee25);
     })));
   });
   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) {
-        while (1) switch (_context20.prev = _context20.next) {
+    describe('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
+      var instance, element, select, content, first;
+      return _regeneratorRuntime.wrap(function _callee31$(_context31) {
+        while (1) switch (_context31.prev = _context31.next) {
           case 0:
-            _mount17 = mount(RangeDemo), instance = _mount17[0], element = _mount17[1]; // date
-            select = element.querySelector('.k-datepicker');
-            select.click();
-            _context20.next = 5;
-            return wait();
+            beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
+              var result;
+              return _regeneratorRuntime.wrap(function _callee26$(_context26) {
+                while (1) switch (_context26.prev = _context26.next) {
+                  case 0:
+                    result = mount(RangeDemo);
+                    instance = result[0];
+                    element = result[1];
+                    // date
+                    select = element.querySelector('.k-datepicker');
+                    select.click();
+                    _context26.next = 7;
+                    return wait();
+                  case 7:
+                    content = getElement('.k-datepicker-content');
+                    // select the middle date
+                    first = content.querySelector('.k-calendar-item:nth-child(18)');
+                  case 9:
+                  case "end":
+                    return _context26.stop();
+                }
+              }, _callee26);
+            })));
+            it('basic selection', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
+              var value;
+              return _regeneratorRuntime.wrap(function _callee27$(_context27) {
+                while (1) switch (_context27.prev = _context27.next) {
+                  case 0:
+                    first.click();
+                    _context27.next = 3;
+                    return wait();
+                  case 3:
+                    expect(instance.get('date')).to.be.null;
+                    // hover status
+                    dispatchEvent(first.nextElementSibling.nextElementSibling, 'mouseenter');
+                    _context27.next = 7;
+                    return wait();
+                  case 7:
+                    expect(first.nextElementSibling.classList.contains('k-in-range')).to.be.true;
+                    dispatchEvent(first.previousElementSibling.previousElementSibling, 'mouseenter');
+                    _context27.next = 11;
+                    return wait();
+                  case 11:
+                    expect(first.previousElementSibling.classList.contains('k-in-range')).to.be.true;
+                    expect(first.nextElementSibling.classList.contains('k-in-range')).to.be.false;
+                    dispatchEvent(first.previousElementSibling.previousElementSibling, 'click');
+                    _context27.next = 16;
+                    return wait();
+                  case 16:
+                    value = instance.get('date');
+                    expect(value).have.lengthOf(2);
+                    expect(value[0] < value[1]).to.be.true;
+                  case 19:
+                  case "end":
+                    return _context27.stop();
+                }
+              }, _callee27);
+            })));
+            it('select the same date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
+              var value1;
+              return _regeneratorRuntime.wrap(function _callee28$(_context28) {
+                while (1) switch (_context28.prev = _context28.next) {
+                  case 0:
+                    // select the middle date
+                    first.click();
+                    first.click();
+                    _context28.next = 4;
+                    return wait();
+                  case 4:
+                    value1 = instance.get('date');
+                    expect(value1).have.lengthOf(2);
+                    expect(value1[0]).eql(value1[1]);
+                  case 7:
+                  case "end":
+                    return _context28.stop();
+                }
+              }, _callee28);
+            })));
+            it('cross months', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
+              var second;
+              return _regeneratorRuntime.wrap(function _callee29$(_context29) {
+                while (1) switch (_context29.prev = _context29.next) {
+                  case 0:
+                    first.click();
+                    second = content.querySelector('.k-datepicker-calendar-time-wrapper:nth-child(2) .k-calendar-item:nth-child(19)');
+                    second.click();
+                    _context29.next = 5;
+                    return wait();
+                  case 5:
+                    expect(instance.get('date')).have.lengthOf(2);
+                  case 6:
+                  case "end":
+                    return _context29.stop();
+                }
+              }, _callee29);
+            })));
+            it('can select end date which is less than start date on selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
+              var first, inputInner;
+              return _regeneratorRuntime.wrap(function _callee30$(_context30) {
+                while (1) switch (_context30.prev = _context30.next) {
+                  case 0:
+                    // hide firstly
+                    document.body.click();
+                    _context30.next = 3;
+                    return wait();
+                  case 3:
+                    instance.set('date', ['2025-08-01', '2025-08-02']);
+                    _context30.next = 6;
+                    return wait();
+                  case 6:
+                    // show again
+                    select.click();
+                    _context30.next = 9;
+                    return wait();
+                  case 9:
+                    // select date 3
+                    first = content.querySelector('.k-calendar-item:not(.k-exceed):not(.k-active)');
+                    first.click();
+                    _context30.next = 13;
+                    return wait();
+                  case 13:
+                    inputInner = select.querySelector('.k-input-inner');
+                    expect(inputInner.value).eql('2025-08-03 ~ 2025-08-02');
+                    expect(instance.get('date')).eql(['2025-08-01', '2025-08-02']);
+                    // should update value after hiding
+                    document.body.click();
+                    _context30.next = 19;
+                    return wait();
+                  case 19:
+                    expect(inputInner.value).eql('2025-08-02 ~ 2025-08-03');
+                    expect(instance.get('date')).eql(['2025-08-02', '2025-08-03']);
+                  case 21:
+                  case "end":
+                    return _context30.stop();
+                }
+              }, _callee30);
+            })));
           case 5:
-            content = getElement('.k-datepicker-content'); // select the middle date
-            first = content.querySelector('.k-calendar-item:nth-child(18)');
-            first.click();
-            _context20.next = 10;
-            return wait();
-          case 10:
-            expect(instance.get('date')).to.be.null;
-            // hover status
-            dispatchEvent(first.nextElementSibling.nextElementSibling, 'mouseenter');
-            _context20.next = 14;
-            return wait();
-          case 14:
-            expect(first.nextElementSibling.classList.contains('k-in-range')).to.be.true;
-            dispatchEvent(first.previousElementSibling.previousElementSibling, 'mouseenter');
-            _context20.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');
-            _context20.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();
-            _context20.next = 29;
-            return wait();
-          case 29:
-            // select the middle date
-            first.click();
-            first.click();
-            _context20.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();
-            _context20.next = 39;
-            return wait();
-          case 39:
-            // select the middle date
-            first.click();
-            dispatchEvent(first.previousElementSibling.previousElementSibling, 'click');
-            _context20.next = 43;
-            return wait();
-          case 43:
-            first.click();
-            dispatchEvent(first.previousElementSibling.previousElementSibling, 'click');
-            expect(instance.get('date')).eql(value);
-            // range cross months
-            select.click();
-            _context20.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();
-            _context20.next = 54;
-            return wait();
-          case 54:
-            expect(instance.get('date')).have.lengthOf(2);
-          case 55:
           case "end":
-            return _context20.stop();
+            return _context31.stop();
         }
-      }, _callee19);
+      }, _callee31);
     })));
-    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) {
-        while (1) switch (_context21.prev = _context21.next) {
+    describe('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee41() {
+      var instance, element, datetime, dateString, match, show, _show4;
+      return _regeneratorRuntime.wrap(function _callee41$(_context41) {
+        while (1) switch (_context41.prev = _context41.next) {
           case 0:
-            _mount18 = mount(RangeDemo), instance = _mount18[0], element = _mount18[1];
-            _element$querySelecto10 = element.querySelectorAll('.k-datepicker'), datetime = _element$querySelecto10[1];
-            datetime.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
-            _context21.next = 12;
-            return wait();
-          case 12:
-            expect(calendar1.querySelector('.k-days')).be.exist;
-            second.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;
-            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:
+            _show4 = function _show6() {
+              _show4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee40() {
+                var content, first;
+                return _regeneratorRuntime.wrap(function _callee40$(_context40) {
+                  while (1) switch (_context40.prev = _context40.next) {
+                    case 0:
+                      datetime.click();
+                      _context40.next = 3;
+                      return wait();
+                    case 3:
+                      content = getElement('.k-datepicker-content');
+                      first = content.querySelector('.k-calendar-item:not(.k-exceed)');
+                      first.click();
+                      _context40.next = 8;
+                      return wait();
+                    case 8:
+                      return _context40.abrupt("return", [content, first]);
+                    case 9:
+                    case "end":
+                      return _context40.stop();
+                  }
+                }, _callee40);
+              }));
+              return _show4.apply(this, arguments);
+            };
+            show = function _show5() {
+              return _show4.apply(this, arguments);
+            };
+            match = function _match(value, time) {
+              expect(value).to.eql(dateString + " " + time);
+            };
+            dateString = dayjs(now).date(1).format('YYYY-MM-DD');
+            beforeEach(function () {
+              var result = mount(RangeDemo);
+              instance = result[0];
+              element = result[1];
+              datetime = element.querySelectorAll('.k-datepicker')[1];
+            });
+            it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
+              var _yield$show, content, first, confirm, inputInner, second, endDateString;
+              return _regeneratorRuntime.wrap(function _callee32$(_context32) {
+                while (1) switch (_context32.prev = _context32.next) {
+                  case 0:
+                    _context32.next = 2;
+                    return show();
+                  case 2:
+                    _yield$show = _context32.sent;
+                    content = _yield$show[0];
+                    first = _yield$show[1];
+                    // should enable confirm button and show the first date string in input
+                    confirm = content.querySelector('.k-datepicker-footer .k-btn');
+                    inputInner = datetime.querySelector('.k-input-inner');
+                    expect(confirm.classList.contains('k-disabled')).to.be.false;
+                    match(inputInner.getAttribute('placeholder'), '00:00:00 ~');
+                    match(inputInner.value, '00:00:00 ~');
+                    expect(instance.get('time')).eql(null);
+                    // select time
+                    dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
+                    _context32.next = 14;
+                    return wait();
+                  case 14:
+                    match(inputInner.getAttribute('placeholder'), '15:00:00 ~');
+                    match(inputInner.value, '15:00:00 ~');
+                    confirm.click();
+                    _context32.next = 19;
+                    return wait();
+                  case 19:
+                    // should disable confirm button on first click
+                    expect(confirm.classList.contains('k-disabled')).to.be.true;
+                    // select the second datetime
+                    second = first.nextElementSibling;
+                    second.click();
+                    _context32.next = 24;
+                    return wait();
+                  case 24:
+                    endDateString = dayjs(now).date(2).format('YYYY-MM-DD');
+                    expect(inputInner.getAttribute('placeholder')).eql(dateString + " 15:00:00 ~ " + endDateString + " 00:00:00");
+                    expect(inputInner.value).eql(dateString + " 15:00:00 ~ " + endDateString + " 00:00:00");
+                    expect(instance.get('time')).eql(null);
+                    confirm.click();
+                    _context32.next = 31;
+                    return wait();
+                  case 31:
+                    expect(instance.get('time')).eql([dateString + " 15:00:00", endDateString + " 00:00:00"]);
+                  case 32:
+                  case "end":
+                    return _context32.stop();
+                }
+              }, _callee32);
+            })));
+            it('skip select date and select time for the end value directly', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
+              var _yield$show2, content, confirm;
+              return _regeneratorRuntime.wrap(function _callee33$(_context33) {
+                while (1) switch (_context33.prev = _context33.next) {
+                  case 0:
+                    _context33.next = 2;
+                    return show();
+                  case 2:
+                    _yield$show2 = _context33.sent;
+                    content = _yield$show2[0];
+                    _context33.next = 6;
+                    return clickConfirm(content);
+                  case 6:
+                    confirm = _context33.sent;
+                    // select time
+                    dispatchEvent(content.querySelector('.k-scroll-select-item'), 'click');
+                    _context33.next = 10;
+                    return wait();
+                  case 10:
+                    confirm.click();
+                    _context33.next = 13;
+                    return wait();
+                  case 13:
+                    expect(instance.get('time')).eql([dateString + " 00:00:00", dateString + " 15:00:00"]);
+                  case 14:
+                  case "end":
+                    return _context33.stop();
+                }
+              }, _callee33);
+            })));
+            it('can change date before click confirm button', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
+              var _yield$show3, content, first, nextFirst, inputInner, dateString, confirm, second;
+              return _regeneratorRuntime.wrap(function _callee34$(_context34) {
+                while (1) switch (_context34.prev = _context34.next) {
+                  case 0:
+                    _context34.next = 2;
+                    return show();
+                  case 2:
+                    _yield$show3 = _context34.sent;
+                    content = _yield$show3[0];
+                    first = _yield$show3[1];
+                    nextFirst = first.nextElementSibling;
+                    nextFirst.click();
+                    _context34.next = 9;
+                    return wait();
+                  case 9:
+                    inputInner = datetime.querySelector('.k-input-inner');
+                    dateString = dayjs(now).date(2).format('YYYY-MM-DD');
+                    expect(inputInner.value).to.eql(dateString + " 00:00:00 ~");
+                    _context34.next = 14;
+                    return clickConfirm(content);
+                  case 14:
+                    confirm = _context34.sent;
+                    second = nextFirst.nextElementSibling;
+                    second.click();
+                    _context34.next = 19;
+                    return wait();
+                  case 19:
+                    expect(inputInner.value).to.eql(dateString + " 00:00:00 ~ " + getDateString(3) + " 00:00:00");
+                    second.nextElementSibling.click();
+                    _context34.next = 23;
+                    return wait();
+                  case 23:
+                    expect(inputInner.value).to.eql(dateString + " 00:00:00 ~ " + getDateString(4) + " 00:00:00");
+                    confirm.click();
+                    _context34.next = 27;
+                    return wait();
+                  case 27:
+                    expect(inputInner.value).to.eql(dateString + " 00:00:00 ~ " + getDateString(4) + " 00:00:00");
+                    expect(instance.get('time')).to.eql([dateString + " 00:00:00", getDateString(4) + " 00:00:00"]);
+                  case 29:
+                  case "end":
+                    return _context34.stop();
+                }
+              }, _callee34);
+            })));
+            it('can select end date which is less than start date on selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
+              var _yield$show4, content, first, nextFirst, inputInner, confirm, a, b;
+              return _regeneratorRuntime.wrap(function _callee35$(_context35) {
+                while (1) switch (_context35.prev = _context35.next) {
+                  case 0:
+                    _context35.next = 2;
+                    return show();
+                  case 2:
+                    _yield$show4 = _context35.sent;
+                    content = _yield$show4[0];
+                    first = _yield$show4[1];
+                    nextFirst = first.nextElementSibling;
+                    nextFirst.click();
+                    _context35.next = 9;
+                    return wait();
+                  case 9:
+                    inputInner = datetime.querySelector('.k-input-inner');
+                    expect(inputInner.value).to.eql(getDateString(2) + " 00:00:00 ~");
+                    // hide to reset the selected state
+                    document.body.click();
+                    _context35.next = 14;
+                    return wait();
+                  case 14:
+                    expect(inputInner.value).to.eql("");
+                    expect(instance.get('time')).to.be.null;
+                    // show again
+                    datetime.click();
+                    _context35.next = 19;
+                    return wait();
+                  case 19:
+                    nextFirst.click();
+                    _context35.next = 22;
+                    return wait();
+                  case 22:
+                    _context35.next = 24;
+                    return clickConfirm(content);
+                  case 24:
+                    confirm = _context35.sent;
+                    first.click();
+                    _context35.next = 28;
+                    return wait();
+                  case 28:
+                    a = getDateString(2) + " 00:00:00";
+                    b = getDateString(1) + " 00:00:00";
+                    expect(inputInner.value).to.eql(a + " ~ " + b);
+                    expect(instance.get('time')).to.eql(null);
+                    confirm.click();
+                    _context35.next = 35;
+                    return wait();
+                  case 35:
+                    expect(instance.get('time')).to.eql([b, a]);
+                  case 36:
+                  case "end":
+                    return _context35.stop();
+                }
+              }, _callee35);
+            })));
+            it('should reset position on clear value or set value to empty', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
+              var a, b, _yield$show5, content, first, selectAgain, _selectAgain;
+              return _regeneratorRuntime.wrap(function _callee37$(_context37) {
+                while (1) switch (_context37.prev = _context37.next) {
+                  case 0:
+                    _selectAgain = function _selectAgain3() {
+                      _selectAgain = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
+                        var confirm;
+                        return _regeneratorRuntime.wrap(function _callee36$(_context36) {
+                          while (1) switch (_context36.prev = _context36.next) {
+                            case 0:
+                              _context36.next = 2;
+                              return wait();
+                            case 2:
+                              first.click();
+                              _context36.next = 5;
+                              return wait();
+                            case 5:
+                              _context36.next = 7;
+                              return clickConfirm(content);
+                            case 7:
+                              confirm = _context36.sent;
+                              first.nextElementSibling.click();
+                              _context36.next = 11;
+                              return wait();
+                            case 11:
+                              confirm.click();
+                              _context36.next = 14;
+                              return wait();
+                            case 14:
+                              expect(instance.get('time')).eql([a, b]);
+                            case 15:
+                            case "end":
+                              return _context36.stop();
+                          }
+                        }, _callee36);
+                      }));
+                      return _selectAgain.apply(this, arguments);
+                    };
+                    selectAgain = function _selectAgain2() {
+                      return _selectAgain.apply(this, arguments);
+                    };
+                    a = getDateString(1) + " 00:00:00";
+                    b = getDateString(2) + " 00:00:00";
+                    instance.set('time', [a, b]);
+                    _context37.next = 7;
+                    return show();
+                  case 7:
+                    _yield$show5 = _context37.sent;
+                    content = _yield$show5[0];
+                    first = _yield$show5[1];
+                    // clear
+                    dispatchEvent(datetime.querySelector('.k-select-clear'), 'click');
+                    _context37.next = 13;
+                    return wait();
+                  case 13:
+                    expect(instance.get('time')).eql(null);
+                    _context37.next = 16;
+                    return selectAgain();
+                  case 16:
+                    // set time to null
+                    datetime.click();
+                    _context37.next = 19;
+                    return wait();
+                  case 19:
+                    instance.set('time', null);
+                    _context37.next = 22;
+                    return selectAgain();
+                  case 22:
+                    // set time to empty array
+                    datetime.click();
+                    _context37.next = 25;
+                    return wait();
+                  case 25:
+                    instance.set('time', []);
+                    _context37.next = 28;
+                    return selectAgain();
+                  case 28:
+                  case "end":
+                    return _context37.stop();
+                }
+              }, _callee37);
+            })));
+            it('should only auto hide after twice selection and the start and end datetime are already selected', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee39() {
+              var _yield$show6, content, first, next, confirm, startDate, endDate, inputInner, separatePos, newFirst, _checkDisplay, setCursor, resetAndShow, _resetAndShow;
+              return _regeneratorRuntime.wrap(function _callee39$(_context39) {
+                while (1) switch (_context39.prev = _context39.next) {
+                  case 0:
+                    _resetAndShow = function _resetAndShow3() {
+                      _resetAndShow = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
+                        return _regeneratorRuntime.wrap(function _callee38$(_context38) {
+                          while (1) switch (_context38.prev = _context38.next) {
+                            case 0:
+                              instance.set('time', [startDate, endDate]);
+                              _context38.next = 3;
+                              return wait();
+                            case 3:
+                              setCursor(separatePos + 1);
+                              datetime.click();
+                              _context38.next = 7;
+                              return wait();
+                            case 7:
+                            case "end":
+                              return _context38.stop();
+                          }
+                        }, _callee38);
+                      }));
+                      return _resetAndShow.apply(this, arguments);
+                    };
+                    resetAndShow = function _resetAndShow2() {
+                      return _resetAndShow.apply(this, arguments);
+                    };
+                    setCursor = function _setCursor(pos) {
+                      inputInner.focus();
+                      inputInner.setSelectionRange(pos, pos);
+                    };
+                    _checkDisplay = function _checkDisplay2(isShow) {
+                      checkDisplay(content, isShow);
+                    };
+                    _context39.next = 6;
+                    return show();
+                  case 6:
+                    _yield$show6 = _context39.sent;
+                    content = _yield$show6[0];
+                    first = _yield$show6[1];
+                    next = first.nextElementSibling;
+                    next.click();
+                    _context39.next = 13;
+                    return wait();
+                  case 13:
+                    _context39.next = 15;
+                    return clickConfirm(content);
+                  case 15:
+                    confirm = _context39.sent;
+                    _context39.next = 18;
+                    return wait();
+                  case 18:
+                    _checkDisplay(true);
+                    first.click();
+                    _context39.next = 22;
+                    return wait();
+                  case 22:
+                    confirm.click();
+                    _context39.next = 25;
+                    return wait();
+                  case 25:
+                    _checkDisplay(false);
+                    startDate = '2025-08-07 00:00:00';
+                    endDate = '2025-08-10 00:00:00';
+                    inputInner = datetime.querySelector('.k-input-inner');
+                    separatePos = (dateString + " 00:00:00 ~").length;
+                    _context39.next = 32;
+                    return resetAndShow();
+                  case 32:
+                    newFirst = content.querySelector('.k-calendar-item:not(.k-exceed)');
+                    newFirst.click();
+                    _context39.next = 36;
+                    return wait();
+                  case 36:
+                    confirm.click();
+                    _context39.next = 39;
+                    return wait();
+                  case 39:
+                    _checkDisplay(true);
+                    expect(instance.get('time')).eql([startDate, endDate]);
+                    // cancel the start time selection
+                    document.body.click();
+                    _context39.next = 44;
+                    return wait();
+                  case 44:
+                    expect(instance.get('time')).eql(['2025-08-01 00:00:00', startDate]);
+                    // select from end position to start position
+                    _context39.next = 47;
+                    return resetAndShow();
+                  case 47:
+                    newFirst.click();
+                    _context39.next = 50;
+                    return wait();
+                  case 50:
+                    confirm.click();
+                    _context39.next = 53;
+                    return wait();
+                  case 53:
+                    newFirst.nextElementSibling.click();
+                    _context39.next = 56;
+                    return wait();
+                  case 56:
+                    _checkDisplay(true);
+                    expect(instance.get('time')).eql([startDate, endDate]);
+                    confirm.click();
+                    _context39.next = 61;
+                    return wait();
+                  case 61:
+                    _checkDisplay(false);
+                    expect(instance.get('time')).eql(['2025-08-01 00:00:00', '2025-08-02 00:00:00']);
+                    // select the end position value then change to end position again 
+                    _context39.next = 65;
+                    return resetAndShow();
+                  case 65:
+                    newFirst.click();
+                    _context39.next = 68;
+                    return wait();
+                  case 68:
+                    confirm.click();
+                    _context39.next = 71;
+                    return wait();
+                  case 71:
+                    // change to the end position
+                    setCursor(separatePos + 1);
+                    datetime.click();
+                    newFirst.nextElementSibling.click();
+                    _context39.next = 76;
+                    return wait();
+                  case 76:
+                    _checkDisplay(true);
+                    confirm.click();
+                    // should not hide 
+                    _context39.next = 80;
+                    return wait();
+                  case 80:
+                    _checkDisplay(true);
+                    // select the start position value
+                    newFirst.click();
+                    _context39.next = 84;
+                    return wait();
+                  case 84:
+                    confirm.click();
+                    _context39.next = 87;
+                    return wait();
+                  case 87:
+                    _checkDisplay(false);
+                    expect(instance.get('time')).eql(['2025-08-01 00:00:00', '2025-08-02 00:00:00']);
+                  case 89:
+                  case "end":
+                    return _context39.stop();
+                }
+              }, _callee39);
+            })));
+          case 11:
           case "end":
-            return _context21.stop();
+            return _context41.stop();
         }
-      }, _callee20);
+      }, _callee41);
     })));
-    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) {
-        while (1) switch (_context22.prev = _context22.next) {
+    it('year', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee42() {
+      var _mount22, instance, element, _element$querySelecto12, select, content, _content$querySelecto9, calendar1, calendar2, first, second, value;
+      return _regeneratorRuntime.wrap(function _callee42$(_context42) {
+        while (1) switch (_context42.prev = _context42.next) {
           case 0:
-            _mount19 = mount(RangeDemo), instance = _mount19[0], element = _mount19[1];
-            _element$querySelecto11 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto11[2];
+            _mount22 = mount(RangeDemo), instance = _mount22[0], element = _mount22[1];
+            _element$querySelecto12 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto12[2];
             select.click();
-            _context22.next = 5;
+            _context42.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$querySelecto9 = content.querySelectorAll('.k-datepicker-calendar-time-wrapper'), calendar1 = _content$querySelecto9[0], calendar2 = _content$querySelecto9[1];
             first = calendar1.querySelector('.k-calendar-item:nth-child(2)');
             second = calendar2.querySelector('.k-calendar-item:nth-child(2)');
             first.click();
             second.click();
-            _context22.next = 13;
+            _context42.next = 13;
             return wait();
           case 13:
             value = instance.get('year');
             expect(value).eql([String(startYear), String(startYear + 10)]);
           case 15:
           case "end":
-            return _context22.stop();
+            return _context42.stop();
         }
-      }, _callee21);
+      }, _callee42);
     })));
-    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) {
-        while (1) switch (_context23.prev = _context23.next) {
+    it('month', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee43() {
+      var _mount23, instance, element, _element$querySelecto13, select, content, _content$querySelecto10, calendar1, calendar2, first, second, value;
+      return _regeneratorRuntime.wrap(function _callee43$(_context43) {
+        while (1) switch (_context43.prev = _context43.next) {
           case 0:
-            _mount20 = mount(RangeDemo), instance = _mount20[0], element = _mount20[1];
-            _element$querySelecto12 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto12[3];
+            _mount23 = mount(RangeDemo), instance = _mount23[0], element = _mount23[1];
+            _element$querySelecto13 = element.querySelectorAll('.k-datepicker'), select = _element$querySelecto13[3];
             select.click();
-            _context23.next = 5;
+            _context43.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$querySelecto10 = content.querySelectorAll('.k-datepicker-calendar-time-wrapper'), calendar1 = _content$querySelecto10[0], calendar2 = _content$querySelecto10[1];
             first = calendar1.querySelector('.k-calendar-item:nth-child(1)');
             second = calendar2.querySelector('.k-calendar-item:nth-child(1)');
             first.click();
             second.click();
-            _context23.next = 13;
+            _context43.next = 13;
             return wait();
           case 13:
             value = instance.get('month');
             expect(value).eql([year + "-01", year + 1 + "-01"]);
           case 15:
           case "end":
-            return _context23.stop();
+            return _context43.stop();
         }
-      }, _callee22);
+      }, _callee43);
     })));
   });
   describe('Keybord', function () {
-    it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
-      var _context24;
-      var _mount21, instance, element, now, select, content;
-      return _regeneratorRuntime.wrap(function _callee23$(_context25) {
-        while (1) switch (_context25.prev = _context25.next) {
+    it('single date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee44() {
+      var _context44;
+      var _mount24, instance, element, now, select, content;
+      return _regeneratorRuntime.wrap(function _callee44$(_context45) {
+        while (1) switch (_context45.prev = _context45.next) {
           case 0:
-            _mount21 = mount(BasicDemo), instance = _mount21[0], element = _mount21[1];
+            _mount24 = mount(BasicDemo), instance = _mount24[0], element = _mount24[1];
             now = new Date();
             select = element.querySelector('.k-datepicker');
             select.click();
-            _context25.next = 6;
+            _context45.next = 6;
             return wait();
           case 6:
             content = getElement('.k-datepicker-content'); // down
             dispatchEvent(select, 'keydown', {
               keyCode: 40
             });
-            _context25.next = 10;
+            _context45.next = 10;
             return wait();
           case 10:
             expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate());
@@ -910,7 +1651,7 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 38
             });
-            _context25.next = 14;
+            _context45.next = 14;
             return wait();
           case 14:
             now.setDate(now.getDate() - 7);
@@ -919,7 +1660,7 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 39
             });
-            _context25.next = 19;
+            _context45.next = 19;
             return wait();
           case 19:
             now.setDate(now.getDate() + 1);
@@ -928,7 +1669,7 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 37
             });
-            _context25.next = 24;
+            _context45.next = 24;
             return wait();
           case 24:
             now.setDate(now.getDate() - 1);
@@ -937,39 +1678,39 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 13
             });
-            _context25.next = 29;
+            _context45.next = 29;
             return wait();
           case 29:
-            expect(_mapInstanceProperty(_context24 = instance.get('date').split('-')).call(_context24, function (v) {
+            expect(_mapInstanceProperty(_context44 = instance.get('date').split('-')).call(_context44, function (v) {
               return +v;
             })).to.eql([now.getFullYear(), now.getMonth() + 1, now.getDate()]);
             // again
             select.click();
-            _context25.next = 33;
+            _context45.next = 33;
             return wait();
           case 33:
             dispatchEvent(select, 'keydown', {
               keyCode: 40
             });
-            _context25.next = 36;
+            _context45.next = 36;
             return wait();
           case 36:
             expect(+content.querySelector('.k-hover').textContent).to.eql(now.getDate());
           case 37:
           case "end":
-            return _context25.stop();
+            return _context45.stop();
         }
-      }, _callee23);
+      }, _callee44);
     })));
-    it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
-      var _mount22, instance, element, select, value, _value;
-      return _regeneratorRuntime.wrap(function _callee24$(_context26) {
-        while (1) switch (_context26.prev = _context26.next) {
+    it('range date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee45() {
+      var _mount25, instance, element, select, value, _value;
+      return _regeneratorRuntime.wrap(function _callee45$(_context46) {
+        while (1) switch (_context46.prev = _context46.next) {
           case 0:
-            _mount22 = mount(RangeDemo), instance = _mount22[0], element = _mount22[1];
+            _mount25 = mount(RangeDemo), instance = _mount25[0], element = _mount25[1];
             select = element.querySelector('.k-datepicker');
             select.click();
-            _context26.next = 5;
+            _context46.next = 5;
             return wait();
           case 5:
             dispatchEvent(select, 'keydown', {
@@ -984,14 +1725,14 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 13
             });
-            _context26.next = 11;
+            _context46.next = 11;
             return wait();
           case 11:
             value = instance.get('date');
             expect(value).have.lengthOf(2);
             // again
             select.click();
-            _context26.next = 16;
+            _context46.next = 16;
             return wait();
           case 16:
             dispatchEvent(select, 'keydown', {
@@ -1003,26 +1744,26 @@ describe('Datepicker', function () {
             dispatchEvent(select, 'keydown', {
               keyCode: 13
             });
-            _context26.next = 21;
+            _context46.next = 21;
             return wait();
           case 21:
             _value = instance.get('date');
             expect(_value[0]).eql(_value[1]);
           case 23:
           case "end":
-            return _context26.stop();
+            return _context46.stop();
         }
-      }, _callee24);
+      }, _callee45);
     })));
   });
-  describe('Event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
-    return _regeneratorRuntime.wrap(function _callee26$(_context29) {
-      while (1) switch (_context29.prev = _context29.next) {
+  describe('Event', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee47() {
+    return _regeneratorRuntime.wrap(function _callee47$(_context49) {
+      while (1) switch (_context49.prev = _context49.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) {
-              while (1) switch (_context28.prev = _context28.next) {
+          it('selecting', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee46() {
+            var fn, Demo, _mount26, instance, element, content, calendar, first, second, firstDateItem, activeTimeItem, nextTimeItem, confirmBtn, endCalendar, endFirst, endSecond, endDateItem, endActiveTimeItem, endNextTimeItem, finalConfirmBtn;
+            return _regeneratorRuntime.wrap(function _callee46$(_context48) {
+              while (1) switch (_context48.prev = _context48.next) {
                 case 0:
                   fn = sinon.spy(function (v) {
                     return console.log(v);
@@ -1030,12 +1771,12 @@ describe('Datepicker', function () {
                   Demo = /*#__PURE__*/function (_Component) {
                     _inheritsLoose(Demo, _Component);
                     function Demo() {
-                      var _context27;
+                      var _context47;
                       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(_context27 = [this]).call(_context27, args)) || this;
+                      _this = _Component.call.apply(_Component, _concatInstanceProperty(_context47 = [this]).call(_context47, args)) || this;
                       _this.Datepicker = Datepicker;
                       return _this;
                     }
@@ -1046,133 +1787,148 @@ 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];
+                  _mount26 = mount(Demo), instance = _mount26[0], element = _mount26[1];
                   element.click();
-                  _context28.next = 7;
+                  _context48.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();
+                  _context48.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();
+                  _context48.next = 40;
                   return wait();
-                case 28:
+                case 40:
                   expect(fn.callCount).to.eql(4);
-                case 29:
+                case 41:
                 case "end":
-                  return _context28.stop();
+                  return _context48.stop();
               }
-            }, _callee25);
+            }, _callee46);
           })));
         case 1:
         case "end":
-          return _context29.stop();
+          return _context49.stop();
       }
-    }, _callee26);
+    }, _callee47);
   })));
-  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) {
-      while (1) switch (_context30.prev = _context30.next) {
+  it('should disable some time pickers', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee48() {
+    var _mount27, instance, element, input, content;
+    return _regeneratorRuntime.wrap(function _callee48$(_context50) {
+      while (1) switch (_context50.prev = _context50.next) {
         case 0:
-          _mount24 = mount(DatetimeDemo), instance = _mount24[0], element = _mount24[1];
+          _mount27 = mount(DatetimeDemo), instance = _mount27[0], element = _mount27[1];
           input = element.querySelectorAll('.k-input')[1];
           input.click();
-          _context30.next = 5;
+          _context50.next = 5;
           return wait();
         case 5:
           content = getElement('.k-datepicker-content'); // change to time panel
           content.querySelector('.k-calendar-item').click();
-          _context30.next = 9;
+          _context50.next = 9;
           return wait();
         case 9:
           dispatchEvent(content.querySelector('.k-scroll-select:nth-child(3) .k-scroll-select-item'), 'click');
           content.querySelector('.k-datepicker-footer .k-btn').click();
+          _context50.next = 13;
+          return wait();
+        case 13:
           expect(instance.get('datetime2').split(' ')[1]).eql('00:00');
-        case 12:
+        case 14:
         case "end":
-          return _context30.stop();
+          return _context50.stop();
       }
-    }, _callee27);
+    }, _callee48);
   })));
-  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) {
-      while (1) switch (_context31.prev = _context31.next) {
+  it('format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee49() {
+    var _mount28, instance, element, _element$querySelecto14, input1, input2, input3, content;
+    return _regeneratorRuntime.wrap(function _callee49$(_context51) {
+      while (1) switch (_context51.prev = _context51.next) {
         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];
+          _mount28 = mount(FormatDemo), instance = _mount28[0], element = _mount28[1];
+          _element$querySelecto14 = element.querySelectorAll('.k-input-inner'), input1 = _element$querySelecto14[0], input2 = _element$querySelecto14[1], input3 = _element$querySelecto14[2];
           input1.click();
-          _context31.next = 5;
+          _context51.next = 5;
           return wait();
         case 5:
           content = getElement('.k-datepicker-content');
           content.querySelector('.k-today').click();
-          _context31.next = 9;
+          _context51.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();
-          _context31.next = 14;
+          _context51.next = 14;
           return wait();
         case 14:
           content = getElement('.k-datepicker-content');
           content.querySelector('.k-today').click();
-          _context31.next = 18;
+          _context51.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();
-          _context31.next = 23;
+          _context51.next = 23;
           return wait();
         case 23:
           content = getElement('.k-datepicker-content');
           content.querySelector('.k-today').click();
-          _context31.next = 27;
+          _context51.next = 27;
           return wait();
         case 27:
-          content.querySelector('.k-btn').click();
-          _context31.next = 30;
+          content.querySelector('.k-datepicker-footer .k-btn').click();
+          _context51.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 _context31.stop();
+          return _context51.stop();
       }
-    }, _callee28);
+    }, _callee49);
   })));
   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) {
-        while (1) switch (_context32.prev = _context32.next) {
+    it('date', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee50() {
+      var _mount29, instance, element, now, content, dateDoms;
+      return _regeneratorRuntime.wrap(function _callee50$(_context52) {
+        while (1) switch (_context52.prev = _context52.next) {
           case 0:
-            _mount26 = mount(MaxMinDemo), instance = _mount26[0], element = _mount26[1];
+            _mount29 = mount(MaxMinDemo), instance = _mount29[0], element = _mount29[1];
             now = dayjs().format('YYYY-MM-DD');
             instance.set('to', now);
             element.querySelector('.k-datepicker').click();
-            _context32.next = 6;
+            _context52.next = 6;
             return wait();
           case 6:
             content = getElement('.k-datepicker-content');
@@ -1181,64 +1937,64 @@ describe('Datepicker', function () {
             expect(+dateDoms[0].textContent).to.eql(+now.split('-')[2]);
           case 10:
           case "end":
-            return _context32.stop();
+            return _context52.stop();
         }
-      }, _callee29);
+      }, _callee50);
     })));
-    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
-      var _mount27, instance, element, now, content;
-      return _regeneratorRuntime.wrap(function _callee30$(_context33) {
-        while (1) switch (_context33.prev = _context33.next) {
+    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee51() {
+      var _mount30, instance, element, now, content;
+      return _regeneratorRuntime.wrap(function _callee51$(_context53) {
+        while (1) switch (_context53.prev = _context53.next) {
           case 0:
-            _mount27 = mount(MaxMinDemo), instance = _mount27[0], element = _mount27[1];
+            _mount30 = mount(MaxMinDemo), instance = _mount30[0], element = _mount30[1];
             now = dayjs().format('YYYY-MM-DD') + '00:00:00';
             instance.set('toTime', now);
             element.querySelectorAll('.k-datepicker')[2].click();
-            _context33.next = 6;
+            _context53.next = 6;
             return wait();
           case 6:
             content = getElement('.k-datepicker-content');
             content.querySelector('.k-today').click();
-            _context33.next = 10;
+            _context53.next = 10;
             return wait();
           case 10:
             expect(content.querySelectorAll('.k-scroll-select-item:not(.k-disabled)')).have.lengthOf(3);
           case 11:
           case "end":
-            return _context33.stop();
+            return _context53.stop();
         }
-      }, _callee30);
+      }, _callee51);
     })));
-    it('should auto place scrollSeelct to the time that equal to the minDate after selecting the date in datetime picker', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
-      var _mount28, instance, element, date, time, fromTime, endTimeTrigger, content;
-      return _regeneratorRuntime.wrap(function _callee31$(_context34) {
-        while (1) switch (_context34.prev = _context34.next) {
+    it('should auto place scrollSeelct to the time that equal to the minDate after selecting the date in datetime picker', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee52() {
+      var _mount31, instance, element, date, time, fromTime, endTimeTrigger, content;
+      return _regeneratorRuntime.wrap(function _callee52$(_context54) {
+        while (1) switch (_context54.prev = _context54.next) {
           case 0:
-            _mount28 = mount(MaxMinDemo), instance = _mount28[0], element = _mount28[1];
+            _mount31 = mount(MaxMinDemo), instance = _mount31[0], element = _mount31[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();
-            _context34.next = 9;
+            _context54.next = 9;
             return wait();
           case 9:
             content = getElement('.k-datepicker-content');
             content.querySelector('.k-today').click();
-            _context34.next = 13;
+            _context54.next = 13;
             return wait();
           case 13:
-            content.querySelector('.k-btn').click();
-            _context34.next = 16;
+            content.querySelector('.k-datepicker-footer .k-btn').click();
+            _context54.next = 16;
             return wait();
           case 16:
             expect(instance.get('toTime')).to.eql(date + " " + time);
           case 17:
           case "end":
-            return _context34.stop();
+            return _context54.stop();
         }
-      }, _callee31);
+      }, _callee52);
     })));
   });
   describe('Input', function () {
@@ -1247,174 +2003,174 @@ describe('Datepicker', function () {
       var Demo = /*#__PURE__*/function (_Component2) {
         _inheritsLoose(Demo, _Component2);
         function Demo() {
-          var _context35;
+          var _context55;
           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(_context35 = [this]).call(_context35, args)) || this;
+          _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context55 = [this]).call(_context55, 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 _mount32 = mount(Demo),
+        instance = _mount32[0],
+        element = _mount32[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) {
-            while (1) switch (_context36.prev = _context36.next) {
+        var _ref49 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee53(value, result) {
+          return _regeneratorRuntime.wrap(function _callee53$(_context56) {
+            while (1) switch (_context56.prev = _context56.next) {
               case 0:
                 input.value = value;
                 dispatchEvent(input, 'input');
-                _context36.next = 4;
+                _context56.next = 4;
                 return wait();
               case 4:
                 expect(instance.get('value')).to.eql(result);
               case 5:
               case "end":
-                return _context36.stop();
+                return _context56.stop();
             }
-          }, _callee32);
+          }, _callee53);
         }));
-        return function (_x, _x2) {
-          return _ref32.apply(this, arguments);
+        return function (_x2, _x3) {
+          return _ref49.apply(this, arguments);
         };
       }();
     }
-    it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
+    it('basic', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee54() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee33$(_context37) {
-        while (1) switch (_context37.prev = _context37.next) {
+      return _regeneratorRuntime.wrap(function _callee54$(_context57) {
+        while (1) switch (_context57.prev = _context57.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" max=\"2021-11-11\" min=\"2020-01-01\" />"); // input incorrect value
-            _context37.next = 3;
+            _context57.next = 3;
             return myTest('2020', undefined);
           case 3:
-            _context37.next = 5;
+            _context57.next = 5;
             return myTest('2020-02-02', '2020-02-02');
           case 5:
-            _context37.next = 7;
+            _context57.next = 7;
             return myTest('', null);
           case 7:
-            _context37.next = 9;
+            _context57.next = 9;
             return myTest('1999-01-01', null);
           case 9:
           case "end":
-            return _context37.stop();
+            return _context57.stop();
         }
-      }, _callee33);
+      }, _callee54);
     })));
-    it('multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
+    it('multiple', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee55() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee34$(_context38) {
-        while (1) switch (_context38.prev = _context38.next) {
+      return _regeneratorRuntime.wrap(function _callee55$(_context58) {
+        while (1) switch (_context58.prev = _context58.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" multiple />"); // input incorrect value
-            _context38.next = 3;
+            _context58.next = 3;
             return myTest('2', undefined);
           case 3:
-            _context38.next = 5;
+            _context58.next = 5;
             return myTest('2020-02-02', ['2020-02-02']);
           case 5:
-            _context38.next = 7;
+            _context58.next = 7;
             return myTest('2', ['2020-02-02']);
           case 7:
-            _context38.next = 9;
+            _context58.next = 9;
             return myTest('2020-03-03', ['2020-02-02', '2020-03-03']);
           case 9:
           case "end":
-            return _context38.stop();
+            return _context58.stop();
         }
-      }, _callee34);
+      }, _callee55);
     })));
-    it('range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
+    it('range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee56() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee35$(_context39) {
-        while (1) switch (_context39.prev = _context39.next) {
+      return _regeneratorRuntime.wrap(function _callee56$(_context59) {
+        while (1) switch (_context59.prev = _context59.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" range max=\"2021-11-11\" min=\"2020-01-01\" />");
-            _context39.next = 3;
+            _context59.next = 3;
             return myTest('2020-03-03', undefined);
           case 3:
-            _context39.next = 5;
+            _context59.next = 5;
             return myTest('2020-03-03~', undefined);
           case 5:
             // input correct value
             dispatchEvent(globalInput, 'click'); // show calendar
-            _context39.next = 8;
+            _context59.next = 8;
             return wait();
           case 8:
-            _context39.next = 10;
+            _context59.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;
+            _context59.next = 13;
             return myTest('', null);
           case 13:
-            _context39.next = 15;
+            _context59.next = 15;
             return myTest('1999-01-01~2020-03-04', null);
           case 15:
           case "end":
-            return _context39.stop();
+            return _context59.stop();
         }
-      }, _callee35);
+      }, _callee56);
     })));
-    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
+    it('datetime', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee57() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee36$(_context40) {
-        while (1) switch (_context40.prev = _context40.next) {
+      return _regeneratorRuntime.wrap(function _callee57$(_context60) {
+        while (1) switch (_context60.prev = _context60.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" type=\"datetime\" />");
-            _context40.next = 3;
+            _context60.next = 3;
             return myTest('2020-03-03', undefined);
           case 3:
-            _context40.next = 5;
+            _context60.next = 5;
             return myTest('2020-03-03 02:02:02', '2020-03-03 02:02:02');
           case 5:
           case "end":
-            return _context40.stop();
+            return _context60.stop();
         }
-      }, _callee36);
+      }, _callee57);
     })));
-    it('datetime range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
+    it('datetime range', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee58() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee37$(_context41) {
-        while (1) switch (_context41.prev = _context41.next) {
+      return _regeneratorRuntime.wrap(function _callee58$(_context61) {
+        while (1) switch (_context61.prev = _context61.next) {
           case 0:
             myTest = test('<Datepicker v-model="value" type="datetime" range />');
-            _context41.next = 3;
+            _context61.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:
-            _context41.next = 5;
+            _context61.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:
-            _context41.next = 7;
+            _context61.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 _context41.stop();
+            return _context61.stop();
         }
-      }, _callee37);
+      }, _callee58);
     })));
-    it('date format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
+    it('date format', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee59() {
       var myTest;
-      return _regeneratorRuntime.wrap(function _callee38$(_context42) {
-        while (1) switch (_context42.prev = _context42.next) {
+      return _regeneratorRuntime.wrap(function _callee59$(_context62) {
+        while (1) switch (_context62.prev = _context62.next) {
           case 0:
             myTest = test("<Datepicker v-model=\"value\" showFormat=\"YYYY\u5E74M\u6708D\u65E5\" />");
-            _context42.next = 3;
+            _context62.next = 3;
             return myTest('2020年2月19日', '2020-02-19');
           case 3:
           case "end":
-            return _context42.stop();
+            return _context62.stop();
         }
-      }, _callee38);
+      }, _callee59);
     })));
   });
 });