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

package/components/datepicker/index.spec.ts

@@ -16,6 +16,26 @@ const now = new Date();
 const year = now.getFullYear();
 const startYear = Math.floor(year / 10) * 10;
 const month = now.getMonth();
+const dateString = dayjs(now).format('YYYY-MM-DD');
+
+async function clickConfirm(content: HTMLElement) {
+    await wait();
+    const confirm = content.querySelector('.k-datepicker-footer .k-btn') as HTMLElement;
+    confirm.click();
+    await wait();
+
+    return confirm;
+}
+
+function checkDisplay(content: HTMLElement, isShow: boolean) {
+    const className = content.className;
+    const isLeave = className.includes('-leave-');
+    expect(isLeave).eql(!isShow);
+}
+
+function getDateString(date: number) {
+    return dayjs(now).date(date).format('YYYY-MM-DD');
+}
 
 describe('Datepicker', () => {
     afterEach(async () => {
@@ -32,23 +52,74 @@ describe('Datepicker', () => {
             await wait();
             const content = getElement('.k-datepicker-content')!;
             (content.querySelector('.k-calendar-item') as HTMLDivElement).click();
+            await wait();
             expect(instance.get('date')).to.be.string;
+            checkDisplay(content, false);
         });
 
-        it('datetime', async () => {
-            const [instance, element] = mount(DatetimeDemo);
+        describe('datetime', () => {
+            it('basic', async () => {
+                const [instance, element] = mount(DatetimeDemo);
 
-            const input = element.querySelector('.k-input') as HTMLElement;
-            input.click();
-            await wait();
-            const content = getElement('.k-datepicker-content')!;
-            // change to time panel
-            (content.querySelector('.k-calendar-item') as HTMLElement).click();
-            await wait();
-            dispatchEvent(content.querySelector('.k-scroll-select-item')!, 'click');
-            (content.querySelector('.k-datepicker-footer .k-btn') as HTMLElement).click();
+                const input = element.querySelector('.k-input') as HTMLElement;
+                input.click();
+                await wait();
+                const content = getElement('.k-datepicker-content')!;
+                // change to time panel
+                (content.querySelector('.k-calendar-item') as HTMLElement).click();
+                await wait();
+                dispatchEvent(content.querySelector('.k-scroll-select-item')!, 'click');
+                (content.querySelector('.k-datepicker-footer .k-btn') as HTMLElement).click();
+
+                expect(instance.get<string>('datetime1').split(' ')[1]).eql('15:00:00');
+            });
+
+            it('skip select date and select time directly', async () => {
+                const [instance, element] = mount(DatetimeDemo);
+
+                const input = element.querySelector('.k-input') as HTMLElement;
+                let content: HTMLElement;
+                async function show() {
+                    input.click();
+                    await wait();
+                    content = getElement('.k-datepicker-content')!;
+                }
+
+                await show();
+                dispatchEvent(content!.querySelector('.k-scroll-select-item')!, 'click');
+                await wait();
+                const inputInner = input.querySelector('.k-input-inner') as HTMLInputElement;
+                expect(inputInner.value).eql(`${dateString} 15:00:00`);
+                expect(instance.get('datetime1')).eql(null);
+
+                // hide to reset selected state
+                document.body.click();
+                await wait();
+                expect(inputInner.getAttribute('placeholder')).eql(`请选择日期和时间`);
+                expect(inputInner.value).eql('');
+                expect(instance.get('datetime1')).eql(null);
+
+                // show again
+                await show();
+                dispatchEvent(content!.querySelector('.k-scroll-select-item')!, 'click');
+                await wait();
+                const confirm = content!.querySelector('.k-datepicker-footer .k-btn') as HTMLElement;
+                confirm.click();
+                await wait();
+                expect(inputInner.value).eql(`${dateString} 15:00:00`);
+                expect(instance.get('datetime1')).eql(`${dateString} 15:00:00`);
 
-            expect(instance.get<string>('datetime1').split(' ')[1]).eql('15:00:00');
+                checkDisplay(content!, false);
+
+                // change time
+                await show();
+                const activeHour = content!.querySelector('.k-scroll-select-item.k-active') as HTMLElement;
+                dispatchEvent(activeHour.nextElementSibling!, 'click');
+                await wait();
+                confirm.click();
+                await wait();
+                expect(instance.get('datetime1')).eql(`${dateString} 16:00:00`);
+            });
         });
 
         it('year', async () => {
@@ -80,38 +151,37 @@ describe('Datepicker', () => {
             expect(+_month - 1).eql(month);
         });
 
-        it('week', async () => {  
-            const [instance, element] = mount(YearMonthDemo);   
-            const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
-            const WeekInput = inputs[2];  
+        // it('week', async () => {  
+            // const [instance, element] = mount(YearMonthDemo);   
+            // const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
+            // const weekInput = inputs[2];  
               
-            WeekInput.click();  
-            await wait();
+            // weekInput.click();  
+            // await wait();
 
-            const content = getElement('.k-datepicker-content')!; 
-            const weekItem = content.querySelector('.week-row:nth-child(1) .k-week-number') as HTMLElement;  
-            weekItem.click();  
+            // const content = getElement('.k-datepicker-content')!; 
+            // const weekItem = content.querySelector('.week-row:nth-child(1) .k-week-number') as HTMLElement;  
+            // weekItem.click();  
             
-            expect(instance.get<string>('week')).to.match(/^\d{4}-\d+周$/)
-            
-        });
+            // expect(instance.get<string>('week')).to.match(/^\d{4}-\d+周$/)
+        // });
         
-        it('quarter', async () => {  
-            const [instance, element] = mount(YearMonthDemo);   
-            const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
-            const QuarterInput = inputs[3];  
+        // it('quarter', async () => {  
+            // const [instance, element] = mount(YearMonthDemo);   
+            // const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
+            // const QuarterInput = inputs[3];  
               
-            QuarterInput.click();  
-            await wait();  
-            const content = getElement('.k-datepicker-content')!;  
+            // QuarterInput.click();  
+            // await wait();  
+            // const content = getElement('.k-datepicker-content')!;  
               
-            // 选择第一个季度  
-            const quarterItem = content.querySelector('.k-calendar-item:nth-child(1)') as HTMLElement;  
-            quarterItem.click();  
+            // // 选择第一个季度  
+            // const quarterItem = content.querySelector('.k-calendar-item:nth-child(1)') as HTMLElement;  
+            // quarterItem.click();  
               
-            // 验证输入框的值是否包含Q1
-            expect(instance.get<string>('quarter')).to.include('Q1')  
-        }); 
+            // // 验证输入框的值是否包含Q1
+            // expect(instance.get<string>('quarter')).to.include('Q1')  
+        // }); 
         
     });
 
@@ -359,14 +429,21 @@ describe('Datepicker', () => {
             await wait();
             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');
+            // select time directly
+            const activeHour = content.querySelector('.k-scroll-select-item.k-active') as HTMLElement;
+            dispatchEvent(activeHour.nextElementSibling!, 'click');
             await wait();
-            instance.set('datetime', []);
+            const confirm = await clickConfirm(content); 
+            expect(instance.get('datetime')).have.lengthOf(3);
+
+            // select time firstly, then select date should only add one value
+            dispatchEvent(activeHour.nextElementSibling!.nextElementSibling!, 'click');
             await wait();
-            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
+            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(19)')!, 'click');
             await wait();
-            expect(instance.get('datetime')).have.lengthOf(1);
+            confirm.click();
+            await wait();
+            expect(instance.get('datetime')).have.lengthOf(4);
         });
 
         it('year', async () => {
@@ -411,141 +488,475 @@ describe('Datepicker', () => {
             expect(instance.get('month')).have.lengthOf(1);
         });
 
-        it('date range', async () => {
-            const [instance, element] = mount(MultipleDemo);
+        describe('date range', async () => {
+            it('date range', async () => {
+                const [instance, element] = mount(MultipleDemo);
 
-            const [, , , , select] = element.querySelectorAll<HTMLElement>('.k-datepicker');
-            dispatchEvent(select, 'click');
-            await wait();
-            const content = getElement('.k-datepicker-content')!;
-            const [calendar1, calendar2] = content.querySelectorAll('.k-datepicker-calendar-time-wrapper');
+                const [, , , , select] = element.querySelectorAll<HTMLElement>('.k-datepicker');
+                dispatchEvent(select, 'click');
+                await wait();
+                const content = getElement('.k-datepicker-content')!;
+                const [calendar1, calendar2] = content.querySelectorAll('.k-datepicker-calendar-time-wrapper');
 
-            
-            const first = calendar1.querySelectorAll('.k-calendar-item')[17] as HTMLElement;
-            const second = calendar2.querySelectorAll('.k-calendar-item')[17] as HTMLElement;
-            first.click();
-            second.click();
-            await wait();
-            expect(instance.get('dateRange')).have.lengthOf(1);
+                const first = calendar1.querySelector('.k-calendar-item:not(.k-exceed)') as HTMLElement;
+                const second = first.nextElementSibling as HTMLElement;
+                first.click();
+                second.click();
+                await wait();
+                const value1 = [`${getDateString(1)}`, `${getDateString(2)}`]
+                expect(instance.get('dateRange')).eql([value1]);
 
-            dispatchEvent(first.nextElementSibling!, 'click');
-            dispatchEvent(second.nextElementSibling!, 'click');
-            await wait();
-            expect(instance.get('dateRange')).have.lengthOf(2);
+                const third = second.nextElementSibling as HTMLElement;
+                const fourth = third.nextElementSibling as HTMLElement;
+                third.click();
+                fourth.click();
+                await wait();
+                const value2 = [`${getDateString(3)}`, `${getDateString(4)}`]
+                expect(instance.get('dateRange')).eql([value1, value2]);
 
-            first.click();
-            second.click();
-            await wait();
-            expect(instance.get('dateRange')).have.lengthOf(1);
+                first.click();
+                second.click();
+                await wait();
+                expect(instance.get('dateRange')).eql([value2]);
 
-            instance.set('dateRange', []);
-            await wait();
-            first.click();
-            second.click();
-            await wait();
-            expect(instance.get('dateRange')).have.lengthOf(1);
+                instance.set('dateRange', []);
+                await wait();
+                first.click();
+                second.click();
+                await wait();
+                expect(instance.get('dateRange')).eql([value1]);
+            });
+
+            it('hover status', async () => {
+                const [instance, element] = mount(MultipleDemo);
+
+                instance.set('dateRange', [['2025-07-11', '2025-07-15']]);
+                const [, , , , select] = element.querySelectorAll<HTMLElement>('.k-datepicker');
+                dispatchEvent(select, 'click');
+                await wait();
+                const content = getElement('.k-datepicker-content')!;
+                const [calendar1, calendar2] = content.querySelectorAll('.k-datepicker-calendar-time-wrapper');
+
+                const first = calendar1.querySelector('.k-calendar-item:not(.k-exceed)') as HTMLElement;
+                const second = first.nextElementSibling as HTMLElement;
+                dispatchEvent(first, 'mouseenter');
+                await wait();
+                expect(second.classList.contains('k-in-range')).eql(false);
+            });
         });
 
+        describe('datetime range', async () => {
+            it('basic', async () => {
+                const [instance, element] = mount(MultipleDemo);
+
+                const [, , , , , select] = element.querySelectorAll<HTMLElement>('.k-datepicker');
+                dispatchEvent(select, 'click');
+                await wait();
+                const content = getElement('.k-datepicker-content')!;
+                const calendar1 = content.querySelector('.k-datepicker-wrapper') as HTMLElement;
+                const first = calendar1.querySelector('.k-calendar-item:not(.k-exceed)') as HTMLElement;
+                const second = first.nextElementSibling as HTMLElement;
+                const inputInner = select.querySelector('.k-input-inner') as HTMLInputElement;
+                first.click();
+                await clickConfirm(content);
+                expect(inputInner.value).eql(`${getDateString(1)} 00:00:00 ~`);
+                second.click();
+                await wait();
+                expect(inputInner.value).eql(`${getDateString(1)} 00:00:00 ~ ${getDateString(2)} 00:00:00`);
+                await clickConfirm(content);
+                const value1 = [`${getDateString(1)} 00:00:00`, `${getDateString(2)} 00:00:00`];
+                expect(instance.get('datetimeRange')).eql([value1]);
+
+                const third = second.nextElementSibling as HTMLElement;
+                const fourth = third.nextElementSibling as HTMLElement;
+                third.click();
+                await clickConfirm(content);
+                fourth.click();
+                await clickConfirm(content);
+                const 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();
+                await clickConfirm(content);
+                fourth.click();
+                await clickConfirm(content);
+                expect(instance.get('datetimeRange')).eql([value1, value2]);
+
+                instance.set('datetimeRange', []);
+                await wait();
+                first.click();
+                await clickConfirm(content);
+                second.click();
+                const confirm = await clickConfirm(content);
+                expect(instance.get('datetimeRange')).eql([value1]);
+                expect(confirm.classList.contains('k-disabled')).eql(true);
+            });
+
+            it('select time directly', async () => {
+                const [instance, element] = mount(MultipleDemo);
+
+                const [, , , , , select] = element.querySelectorAll<HTMLElement>('.k-datepicker');
+                dispatchEvent(select, 'click');
+                await wait();
+                const content = getElement('.k-datepicker-content')!;
+                const calendar = content.querySelector('.k-datepicker-wrapper') as HTMLElement;
+
+                const activeHour = calendar.querySelector('.k-scroll-select-item.k-active') as HTMLElement;
+                (activeHour.nextElementSibling as HTMLElement).click();
+                await clickConfirm(content);
+                (activeHour.nextElementSibling as HTMLElement).click();
+                await clickConfirm(content);
+                expect(instance.get('datetimeRange')).to.eql([[`${dateString} 01:00:00`, `${dateString} 02:00:00`]]);
+            });
+        });
     });
 
     describe('Range', () => {
-        it('date', async () => {
-            const [instance, element] = mount(RangeDemo);
-
-            // date
-            const select = element.querySelector('.k-datepicker') as HTMLElement;
-            select.click();
-            await wait();
-            let content = getElement('.k-datepicker-content')!;
-            // select the middle date
-            let first = content.querySelector('.k-calendar-item:nth-child(18)') as HTMLElement;
-            first.click();
-            await wait();
-            expect(instance.get('date')).to.be.null;
-            // hover status
-            dispatchEvent(first.nextElementSibling!.nextElementSibling!, 'mouseenter');
-            await wait();
-            expect(first.nextElementSibling!.classList.contains('k-in-range')).to.be.true;
-            dispatchEvent(first.previousElementSibling!.previousElementSibling!, 'mouseenter');
-            await wait();
-            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');
-            await wait();
-            const value = instance.get('date')!;
-            expect(value).have.lengthOf(2);
-            expect(value[0] < value[1]).to.be.true;
+        describe('date', async () => {
+            let instance: RangeDemo; 
+            let element: HTMLElement;
+            let select: HTMLElement;
+            let content: HTMLElement;
+            let first: HTMLElement;
+
+            beforeEach(async () => {
+                const result = mount(RangeDemo);
+                instance = result[0];
+                element = result[1];
+
+                // date
+                select = element.querySelector('.k-datepicker') as HTMLElement;
+                select.click();
+                await wait();
+                content = getElement('.k-datepicker-content')!;
+                // select the middle date
+                first = content.querySelector('.k-calendar-item:nth-child(18)') as HTMLElement;
+            });
 
-            // select the same date
-            select.click();
-            await wait();
-            // select the middle date
-            first.click();
-            first.click();
-            await wait();
-            const value1 = instance.get('date')!;
-            expect(value1).have.lengthOf(2);
-            expect(value1[0]).eql(value1[1]);
+            it('basic selection', async () => {
+                first.click();
+                await wait();
+                expect(instance.get('date')).to.be.null;
+                // hover status
+                dispatchEvent(first.nextElementSibling!.nextElementSibling!, 'mouseenter');
+                await wait();
+                expect(first.nextElementSibling!.classList.contains('k-in-range')).to.be.true;
+                dispatchEvent(first.previousElementSibling!.previousElementSibling!, 'mouseenter');
+                await wait();
+                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');
+                await wait();
+                const value = instance.get('date')!;
+                expect(value).have.lengthOf(2);
+                expect(value[0] < value[1]).to.be.true;
+            });
+
+            it('select the same date', async () => {
+                // select the middle date
+                first.click();
+                first.click();
+                await wait();
+                const value1 = instance.get('date')!;
+                expect(value1).have.lengthOf(2);
+                expect(value1[0]).eql(value1[1]);
+            });
+
+            it('cross months', async () => {
+                first.click();
+                let second = content.querySelector('.k-datepicker-calendar-time-wrapper:nth-child(2) .k-calendar-item:nth-child(19)') as HTMLElement;
+                second.click();
+                await wait();
+                expect(instance.get('date')).have.lengthOf(2);
+            });
 
-            // cancel all of range values and re-select
-            select.click();
-            await wait();
-            // select the middle date
-            first.click();
-            dispatchEvent(first.previousElementSibling!.previousElementSibling!, 'click');
-            await wait();
-            first.click();
-            dispatchEvent(first.previousElementSibling!.previousElementSibling!, 'click');
-            expect(instance.get('date')).eql(value);
+            it('can select end date which is less than start date on selecting', async () => {
+                // hide firstly
+                document.body.click();
+                await wait();
+                instance.set('date', ['2025-08-01', '2025-08-02']);
+                await wait();
+                // show again
+                select.click();
+                await wait();
+                // select date 3
+                const first = content.querySelector('.k-calendar-item:not(.k-exceed):not(.k-active)') as HTMLElement;
+                first.click();
+                await wait();
 
-            // range cross months
-            select.click();
-            await wait();
-            first.click();
-            let second = content.querySelector('.k-datepicker-calendar-time-wrapper:nth-child(2) .k-calendar-item:nth-child(19)') as HTMLElement;
-            second.click();
-            await wait();
-            expect(instance.get('date')).have.lengthOf(2);
+                const inputInner = select.querySelector('.k-input-inner') as HTMLInputElement;
+                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();
+                await wait();
+                expect(inputInner.value).eql('2025-08-02 ~ 2025-08-03');
+                expect(instance.get('date')).eql(['2025-08-02', '2025-08-03']);
+            });
         });
 
-        it('datetime', async () => {
-            const [instance, element] = mount(MultipleDemo);
+        describe('datetime', async () => {
+            let instance: RangeDemo;
+            let element: HTMLElement;
+            let datetime: HTMLElement;
 
-            const [, select] = element.querySelectorAll<HTMLElement>('.k-datepicker');
-            dispatchEvent(select, 'click');
-            await wait();
-            const content = getElement('.k-datepicker-content')!;
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)')!, 'click');
-            await wait();
-            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
-            await wait();
-            expect(instance.get('datetime')).have.lengthOf(1);
+            const dateString = dayjs(now).date(1).format('YYYY-MM-DD');
 
-            // select the same datetime
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)')!, 'click');
-            await wait();
-            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
-            await wait();
-            expect(instance.get('datetime')).have.lengthOf(1);
+            function match(value: string | null, time: string) {
+                expect(value).to.eql(`${dateString} ${time}`);
+            }
 
-            // select different time with the same date
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)')!, 'click');
-            await wait();
-            dispatchEvent(content.querySelector('.k-scroll-select-item')!, 'click');
-            await wait();
-            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
-            await wait();
-            expect(instance.get('datetime')).have.lengthOf(2);
+            async function show() {
+                datetime.click();
+                await wait();
+                const content = getElement('.k-datepicker-content')!;
+                const first = content.querySelector('.k-calendar-item:not(.k-exceed)') as HTMLElement;
+                first.click();
+                await wait();
 
-            // change to time panel, and remove the selections, then click confirm ok
-            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)')!, 'click');
-            await wait();
-            instance.set('datetime', []);
-            await wait();
-            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
-            await wait();
-            expect(instance.get('datetime')).have.lengthOf(1);
+                return [content, first];
+            }
+
+            beforeEach(() => {
+                const result = mount(RangeDemo);
+                instance = result[0];
+                element = result[1];
+                datetime = element.querySelectorAll<HTMLElement>('.k-datepicker')[1];
+            });
+
+            it('basic', async () => {
+                const [content, first] = await show();
+
+                // should enable confirm button and show the first date string in input
+                const confirm = content.querySelector('.k-datepicker-footer .k-btn') as HTMLElement;
+                const inputInner = datetime.querySelector('.k-input-inner') as HTMLInputElement;
+                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');
+                await wait();
+                match(inputInner.getAttribute('placeholder'), '15:00:00 ~');
+                match(inputInner.value, '15:00:00 ~');
+                confirm.click();
+                await wait();
+                // should disable confirm button on first click
+                expect(confirm.classList.contains('k-disabled')).to.be.true;
+
+                // select the second datetime
+                const second = first.nextElementSibling as HTMLElement;
+                second.click();
+                await wait();
+                const 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();
+                await wait();
+                expect(instance.get('time')).eql([`${dateString} 15:00:00`, `${endDateString} 00:00:00`]);
+            });
+
+            it('skip select date and select time for the end value directly', async () => {
+                const [content] = await show();
+
+                const confirm = await clickConfirm(content);
+                // select time
+                dispatchEvent(content.querySelector('.k-scroll-select-item')!, 'click');
+                await wait();
+                confirm.click();
+                await wait();
+                expect(instance.get('time')).eql([`${dateString} 00:00:00`, `${dateString} 15:00:00`]);
+            });
+
+            it('can change date before click confirm button', async () => {
+                const [content, first] = await show();
+                const nextFirst = first.nextElementSibling as HTMLElement;
+                nextFirst.click();
+                await wait();
+                const inputInner = datetime.querySelector('.k-input-inner') as HTMLInputElement;
+                const dateString = dayjs(now).date(2).format('YYYY-MM-DD');
+                expect(inputInner.value).to.eql(`${dateString} 00:00:00 ~`);
+                
+                const confirm = await clickConfirm(content);
+                const second = nextFirst.nextElementSibling as HTMLElement;
+                second.click();
+                await wait();
+                expect(inputInner.value).to.eql(`${dateString} 00:00:00 ~ ${getDateString(3)} 00:00:00`);
+                (second.nextElementSibling as HTMLElement).click();
+                await wait();
+                expect(inputInner.value).to.eql(`${dateString} 00:00:00 ~ ${getDateString(4)} 00:00:00`);
+
+                confirm.click();
+                await wait();
+                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`]);
+            });
+
+            it('can select end date which is less than start date on selecting', async () => {
+                const [content, first] = await show();
+                const nextFirst = first.nextElementSibling as HTMLElement;
+                nextFirst.click();
+                await wait();
+
+                const inputInner = datetime.querySelector('.k-input-inner') as HTMLInputElement;
+                expect(inputInner.value).to.eql(`${getDateString(2)} 00:00:00 ~`);
+
+                // hide to reset the selected state
+                document.body.click();
+                await wait();
+                expect(inputInner.value).to.eql(``);
+                expect(instance.get('time')).to.be.null;
+
+                // show again
+                datetime.click();
+                await wait();
+                nextFirst.click();
+                await wait();
+                const confirm = await clickConfirm(content);
+                first.click();
+                await wait();
+                const a = `${getDateString(2)} 00:00:00`;
+                const b = `${getDateString(1)} 00:00:00`;
+                expect(inputInner.value).to.eql(`${a} ~ ${b}`);
+                expect(instance.get('time')).to.eql(null);
+
+                confirm.click();
+                await wait();
+                expect(instance.get('time')).to.eql([b, a]);
+            });
+
+            it('should reset position on clear value or set value to empty', async () => {
+                const a = `${getDateString(1)} 00:00:00`;
+                const b = `${getDateString(2)} 00:00:00`;
+                instance.set('time', [a, b]);
+                const [content, first] = await show();
+                
+                // clear
+                dispatchEvent(datetime.querySelector('.k-select-clear')!, 'click');
+                await wait();
+                expect(instance.get('time')).eql(null);
+                await selectAgain();
+
+                // set time to null
+                datetime.click();
+                await wait();
+                instance.set('time', null);
+                await selectAgain();
+
+                // set time to empty array
+                datetime.click();
+                await wait();
+                instance.set<[]>('time', []);
+                await selectAgain();
+
+                async function selectAgain() {
+                    // can select the datetime again
+                    await wait();
+                    first.click();
+                    await wait();
+                    const confirm = await clickConfirm(content);
+                    (first.nextElementSibling as HTMLElement).click();
+                    await wait();
+                    confirm.click();
+                    await wait();
+                    expect(instance.get('time')).eql([a, b]);
+                }
+            });
+
+            it('should only auto hide after twice selection and the start and end datetime are already selected', async () => {
+                const [content, first] = await show();
+                const next = first.nextElementSibling as HTMLElement;
+                next.click();
+                await wait();
+                const confirm = await clickConfirm(content);
+                await wait();
+                _checkDisplay(true);
+
+                first.click();
+                await wait();
+                confirm.click();
+                await wait();
+                _checkDisplay(false);
+
+                const startDate = '2025-08-07 00:00:00';
+                const endDate = '2025-08-10 00:00:00'
+                const inputInner = datetime.querySelector('.k-input-inner') as HTMLInputElement;
+                const separatePos = `${dateString} 00:00:00 ~`.length;
+
+                await resetAndShow();
+                const newFirst = content.querySelector('.k-calendar-item:not(.k-exceed)') as HTMLElement;
+                newFirst.click();
+                await wait();
+                confirm.click();
+                await wait();
+                _checkDisplay(true);
+                expect(instance.get('time')).eql([startDate, endDate]);
+                
+                // cancel the start time selection
+                document.body.click();
+                await wait();
+                expect(instance.get('time')).eql(['2025-08-01 00:00:00', startDate]);
+
+                // select from end position to start position
+                await resetAndShow();
+                newFirst.click();
+                await wait();
+                confirm.click();
+                await wait();
+                (newFirst.nextElementSibling as HTMLElement).click();
+                await wait();
+                _checkDisplay(true);
+                expect(instance.get('time')).eql([startDate, endDate]);
+                confirm.click();
+                await wait();
+                _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 
+                await resetAndShow();
+                newFirst.click();
+                await wait();
+                confirm.click();
+                await wait();
+                // change to the end position
+                setCursor(separatePos + 1);
+                datetime.click();
+                (newFirst.nextElementSibling as HTMLElement).click();
+                await wait();
+                _checkDisplay(true);
+                confirm.click();
+                // should not hide 
+                await wait();
+                _checkDisplay(true);
+                // select the start position value
+                newFirst.click();
+                await wait();
+                confirm.click();
+                await wait();
+                _checkDisplay(false);
+                expect(instance.get('time')).eql(['2025-08-01 00:00:00', '2025-08-02 00:00:00']);
+
+                function _checkDisplay(isShow: boolean) {
+                    checkDisplay(content, isShow);
+                }
+
+                function setCursor(pos: number) {
+                    inputInner.focus();
+                    inputInner.setSelectionRange(pos, pos);
+                }
+
+                async function resetAndShow() {
+                    instance.set('time', [startDate, endDate]);
+                    await wait();
+                    setCursor(separatePos + 1);
+                    datetime.click();
+                    await wait();
+                }
+            });
         });
 
         it('year', async () => {
@@ -709,6 +1120,33 @@ describe('Datepicker', () => {
             await wait();
             expect(fn.callCount).to.eql(4);
         });
+
+        it('should trigger change event once', async () => {
+            const change = sinon.spy(() => console.log('change'));
+            class Demo extends Component<{value: string}> {
+                static template = `
+                    const {Datepicker} = this;
+                    <Datepicker range ev-$change:value={this.onChange} v-model="value" clearable />
+                `;
+                private Datepicker = Datepicker;
+
+                onChange() {
+                    change();
+                }
+            }
+            const [instance, element] = mount(Demo);
+            const input = element.querySelector<HTMLInputElement>('.k-input-inner')!;
+
+            input.click();
+            await wait();
+            const calendar = getElement('.k-datepicker-content')!;
+            const [day1, day2] = calendar.querySelectorAll<HTMLElement>('.k-calendar-item:not(.k-exceed)');
+            day1.click();
+            await wait();
+            day2.click();
+            await wait();
+            expect(change.callCount).to.eql(1);
+        });
     });
 
     it('should disable some time pickers', async () => {
@@ -724,6 +1162,7 @@ describe('Datepicker', () => {
         await wait();
         dispatchEvent(content.querySelector('.k-scroll-select:nth-child(3) .k-scroll-select-item')!, 'click');
         (content.querySelector('.k-datepicker-footer .k-btn') as HTMLElement).click();
+        await wait();
 
         expect(instance.get<string>('datetime2').split(' ')[1]).eql('00:00');
     });