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

package/components/datepicker/index.spec.ts

@@ -79,6 +79,40 @@ describe('Datepicker', () => {
             expect(+_year).eql(year);
             expect(+_month - 1).eql(month);
         });
+
+        it('week', async () => {  
+            const [instance, element] = mount(YearMonthDemo);   
+            const inputs = element.querySelectorAll<HTMLElement>('.k-input'); 
+            const WeekInput = inputs[2];  
+              
+            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();  
+            
+            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];  
+              
+            QuarterInput.click();  
+            await wait();  
+            const content = getElement('.k-datepicker-content')!;  
+              
+            // 选择第一个季度  
+            const quarterItem = content.querySelector('.k-calendar-item:nth-child(1)') as HTMLElement;  
+            quarterItem.click();  
+              
+            // 验证输入框的值是否包含Q1
+            expect(instance.get<string>('quarter')).to.include('Q1')  
+        }); 
+        
     });
 
     describe('Panel', async () => {
@@ -137,7 +171,7 @@ describe('Datepicker', () => {
             select.click();
             await wait();
             const content = getElement('.k-datepicker-content')!;
-            const [panel1, panel2] = content.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            const [panel1, panel2] = content.querySelectorAll<HTMLElement>('.k-datepicker-calendar-time-wrapper');
             const [nextMonth, nextYear] = panel1.querySelectorAll<HTMLElement>('.k-next');
             const [monthValues1, monthValues2]= content.querySelectorAll<HTMLElement>('.k-month-values');
 
@@ -183,7 +217,7 @@ describe('Datepicker', () => {
             select.click();
             await wait();
             const content = getElement('.k-datepicker-content')!;
-            const [panel1, panel2] = content.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            const [panel1, panel2] = content.querySelectorAll<HTMLElement>('.k-datepicker-calendar-time-wrapper');
             const [next] = panel1.querySelectorAll<HTMLElement>('.k-next');
             const [prev] = panel2.querySelectorAll<HTMLElement>('.k-prev');
             const [label1, label2]= content.querySelectorAll<HTMLElement>('.k-month-values');
@@ -209,7 +243,7 @@ describe('Datepicker', () => {
             select.click();
             await wait();
             const content = getElement('.k-datepicker-content')!;
-            const [panel1, panel2] = content.querySelectorAll<HTMLElement>('.k-datepicker-calendar-wrapper');
+            const [panel1, panel2] = content.querySelectorAll<HTMLElement>('.k-datepicker-calendar-time-wrapper');
             const [next] = panel1.querySelectorAll<HTMLElement>('.k-next');
             const [prev] = panel2.querySelectorAll<HTMLElement>('.k-prev');
             const [label1, label2]= content.querySelectorAll<HTMLElement>('.k-month-values');
@@ -305,14 +339,14 @@ describe('Datepicker', () => {
             const content = getElement('.k-datepicker-content')!;
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)')!, 'click');
             await wait();
-            dispatchEvent(content.querySelector('.k-btn')!, 'click');
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
             await wait();
             expect(instance.get('datetime')).have.lengthOf(1);
 
             // select the same datetime
             dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)')!, 'click');
             await wait();
-            dispatchEvent(content.querySelector('.k-btn')!, 'click');
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
             await wait();
             expect(instance.get('datetime')).have.lengthOf(1);
 
@@ -321,7 +355,7 @@ describe('Datepicker', () => {
             await wait();
             dispatchEvent(content.querySelector('.k-scroll-select-item')!, 'click');
             await wait();
-            dispatchEvent(content.querySelector('.k-btn')!, 'click');
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
             await wait();
             expect(instance.get('datetime')).have.lengthOf(2);
 
@@ -330,7 +364,7 @@ describe('Datepicker', () => {
             await wait();
             instance.set('datetime', []);
             await wait();
-            dispatchEvent(content.querySelector('.k-btn')!, 'click');
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
             await wait();
             expect(instance.get('datetime')).have.lengthOf(1);
         });
@@ -384,7 +418,9 @@ describe('Datepicker', () => {
             dispatchEvent(select, 'click');
             await wait();
             const content = getElement('.k-datepicker-content')!;
-            const [calendar1, calendar2] = content.querySelectorAll('.k-datepicker-calendar-wrapper');
+            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();
@@ -410,55 +446,6 @@ describe('Datepicker', () => {
             expect(instance.get('dateRange')).have.lengthOf(1);
         });
 
-        it('datetime 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-wrapper');
-            calendar1.querySelectorAll<HTMLElement>('.k-calendar-item')[17].click();
-            calendar2.querySelectorAll<HTMLElement>('.k-calendar-item')[17].click();
-            await wait();
-            content.querySelector<HTMLElement>('.k-btn')!.click();
-            await wait();
-            expect(instance.get('datetimeRange')).have.lengthOf(1);
-
-            calendar1.querySelectorAll<HTMLElement>('.k-calendar-item')[18].click();
-            calendar2.querySelectorAll<HTMLElement>('.k-calendar-item')[18].click();
-            await wait();
-            content.querySelector<HTMLElement>('.k-btn')!.click();
-            await wait();
-            expect(instance.get('datetimeRange')).have.lengthOf(2);
-
-            // selecting the same date time will do nothing
-            calendar1.querySelectorAll<HTMLElement>('.k-calendar-item')[17].click();
-            calendar2.querySelectorAll<HTMLElement>('.k-calendar-item')[17].click();
-            await wait();
-            content.querySelector<HTMLElement>('.k-btn')!.click();
-            await wait();
-            expect(instance.get('datetimeRange')).have.lengthOf(2);
-
-            instance.set('datetimeRange', []);
-            await wait();
-            calendar1.querySelectorAll<HTMLElement>('.k-calendar-item')[17].click();
-            calendar2.querySelectorAll<HTMLElement>('.k-calendar-item')[17].click();
-            await wait();
-            content.querySelector<HTMLElement>('.k-btn')!.click();
-            await wait();
-            expect(instance.get('datetimeRange')).have.lengthOf(1);
-
-            // select the first value in end panel
-            calendar2.querySelectorAll<HTMLElement>('.k-calendar-item')[17].click();
-            calendar2.querySelectorAll<HTMLElement>('.k-calendar-item')[17].click();
-            await wait();
-            content.querySelector<HTMLElement>('.k-btn')!.click();
-            await wait();
-            const values = instance.get('datetimeRange')!;
-            expect(values).have.lengthOf(2);
-            expect(values[1][1].includes('23:59:59')).to.be.true;
-        });
     });
 
     describe('Range', () => {
@@ -515,7 +502,7 @@ describe('Datepicker', () => {
             select.click();
             await wait();
             first.click();
-            let second = content.querySelector('.k-datepicker-calendar-wrapper:nth-child(2) .k-calendar-item:nth-child(19)') as HTMLElement;
+            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);
@@ -523,28 +510,42 @@ describe('Datepicker', () => {
         });
 
         it('datetime', async () => {
-            const [instance, element] = mount(RangeDemo);
+            const [instance, element] = mount(MultipleDemo);
 
-            const [, datetime] = element.querySelectorAll<HTMLElement>('.k-datepicker');
-            datetime.click();
+            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-wrapper');
-            const first = calendar1.querySelectorAll('.k-calendar-item')[17] as HTMLElement;
-            const second = calendar2.querySelectorAll('.k-calendar-item')[17] as HTMLElement;
-            first.click();
-            // should stay at date panel
+            dispatchEvent(content.querySelector('.k-calendar-item:nth-child(18)')!, 'click');
             await wait();
-            expect(calendar1.querySelector('.k-days')).be.exist;
-            second.click();
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
             await wait();
-            dispatchEvent(calendar1.querySelector<HTMLElement>('.k-scroll-select-wrapper .k-active')!.nextElementSibling!, 'click');
-            dispatchEvent(calendar2.querySelector<HTMLElement>('.k-scroll-select-wrapper .k-active')!.previousElementSibling!, 'click');
-            (content.querySelector('.k-datepicker-footer .k-btn') as HTMLElement).click();
+            expect(instance.get('datetime')).have.lengthOf(1);
+
+            // 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);
+
+            // 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);
+
+            // 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();
-            const value2 = instance.get('time')!;
-            expect(value2).have.lengthOf(2);
-            expect(value2.map(item => item.split(' ')[1])).eql(['01:00:00', '22:59:59']);
+            dispatchEvent(content.querySelector('.k-datepicker-footer .k-btn')!, 'click');
+            await wait();
+            expect(instance.get('datetime')).have.lengthOf(1);
         });
 
         it('year', async () => {
@@ -554,7 +555,7 @@ describe('Datepicker', () => {
             select.click();
             await wait();
             const content = getElement('.k-datepicker-content')!;
-            const [calendar1, calendar2] = content.querySelectorAll('.k-datepicker-calendar-wrapper');
+            const [calendar1, calendar2] = content.querySelectorAll('.k-datepicker-calendar-time-wrapper');
             const first = calendar1.querySelector('.k-calendar-item:nth-child(2)') as HTMLElement;
             const second = calendar2.querySelector('.k-calendar-item:nth-child(2)') as HTMLElement;
             first.click();
@@ -571,7 +572,7 @@ describe('Datepicker', () => {
             select.click();
             await wait();
             const content = getElement('.k-datepicker-content')!;
-            const [calendar1, calendar2] = content.querySelectorAll('.k-datepicker-calendar-wrapper');
+            const [calendar1, calendar2] = content.querySelectorAll('.k-datepicker-calendar-time-wrapper');
             const first = calendar1.querySelector('.k-calendar-item:nth-child(1)') as HTMLElement;
             const second = calendar2.querySelector('.k-calendar-item:nth-child(1)') as HTMLElement;
             first.click();
@@ -672,23 +673,39 @@ describe('Datepicker', () => {
             element.click();
             await wait();
             const content = getElement('.k-datepicker-content')!;
-            const [calendar1, calendar2] = content.querySelectorAll('.k-datepicker-calendar-wrapper');
-            const first = calendar1.querySelectorAll('.k-calendar-item')[17] as HTMLElement;
-            const second = calendar2.querySelectorAll('.k-calendar-item')[17] as HTMLElement;
-            first.click();
+            const calendar = content.querySelector<HTMLElement>('.k-datepicker-calendar-time-wrapper');
+            const first = calendar!.querySelector('.k-datepicker-calendar') as HTMLElement;
+            const second = calendar!.querySelector('.k-datepicker-time-wrapper') as HTMLElement;
+            const firstDateItem = first.querySelector('.k-calendar-item') as HTMLElement;
+            firstDateItem.click();
             expect(fn.callCount).to.eql(1);
             expect(fn.lastCall.args[0]).have.lengthOf(1);
-            second.click();
+            const activeTimeItem = second.querySelector('.k-scroll-select-wrapper .k-active') as HTMLElement;
+            const nextTimeItem = activeTimeItem.nextElementSibling as HTMLElement;
+            nextTimeItem.click();
             expect(fn.callCount).to.eql(2);
-            expect(fn.lastCall.args[0]).have.lengthOf(2);
+            expect(fn.lastCall.args[0]).have.lengthOf(1);
+            const confirmBtn = content.querySelector('.k-datepicker-footer .k-btn') as HTMLElement;
+            confirmBtn.click();
             await wait();
-            dispatchEvent(calendar1.querySelector<HTMLElement>('.k-scroll-select-wrapper .k-active')!.nextElementSibling!, 'click');
+
+            const endCalendar = content.querySelector<HTMLElement>('.k-datepicker-calendar-time-wrapper');
+            const endFirst = endCalendar!.querySelector('.k-datepicker-calendar') as HTMLElement;
+            const endSecond = endCalendar!.querySelector('.k-datepicker-time-wrapper') as HTMLElement;
+            
+            const endDateItem = endFirst.querySelector('.k-calendar-item') as HTMLElement;
+            endDateItem.click();
             expect(fn.callCount).to.eql(3);
-            expect(fn.lastCall.args[0]).have.lengthOf(2);
-            dispatchEvent(calendar2.querySelector<HTMLElement>('.k-scroll-select-wrapper .k-active')!.previousElementSibling!, 'click');
+            expect(fn.lastCall.args[0]).have.lengthOf(1); 
+            
+            const endActiveTimeItem = endSecond.querySelector('.k-scroll-select-wrapper .k-active') as HTMLElement;
+            const endNextTimeItem = endActiveTimeItem.nextElementSibling as HTMLElement;
+            endNextTimeItem.click();
             expect(fn.callCount).to.eql(4);
-            expect(fn.lastCall.args[0]).have.lengthOf(2);
-            (content.querySelector('.k-datepicker-footer .k-btn') as HTMLElement).click();
+            expect(fn.lastCall.args[0]).have.lengthOf(1);
+            
+            const finalConfirmBtn = content.querySelector('.k-datepicker-footer .k-btn') as HTMLElement;
+            finalConfirmBtn.click();
             await wait();
             expect(fn.callCount).to.eql(4);
         });
@@ -736,7 +753,7 @@ describe('Datepicker', () => {
         content = getElement('.k-datepicker-content')!;
         content.querySelector<HTMLElement>('.k-today')!.click();
         await wait();
-        content.querySelector<HTMLElement>('.k-btn')!.click();
+        content.querySelector<HTMLElement>('.k-datepicker-footer .k-btn')!.click();
         await wait();
         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');
@@ -782,7 +799,7 @@ describe('Datepicker', () => {
             const content = getElement('.k-datepicker-content')!;
             content.querySelector<HTMLElement>('.k-today')!.click();
             await wait();
-            content.querySelector<HTMLElement>('.k-btn')!.click();
+            content.querySelector<HTMLElement>('.k-datepicker-footer .k-btn')!.click();
             await wait();
             expect(instance.get('toTime')).to.eql(`${date} ${time}`);
         });
@@ -853,7 +870,7 @@ describe('Datepicker', () => {
             await myTest('2020-03-03~2020-03-04', ['2020-03-03', '2020-03-04']);
             expect(
                 getElement('.k-datepicker-content')!
-                    .querySelector<HTMLElement>('.k-datepicker-calendar-wrapper:nth-child(1)')!
+                    .querySelector<HTMLElement>('.k-datepicker-calendar-time-wrapper:nth-child(1)')!
                     .innerHTML
             ).to.matchSnapshot();
             // clear value

package/components/datepicker/index.ts

@@ -14,6 +14,9 @@ import {usePanel} from './usePanel';
 import {useFocusDate} from './useFocusDate';
 import {useKeyboards} from './useKeyboards';
 import {Shortcut} from './shortcuts';
+import {usePosition} from './usePosition';
+import {useMergeRange} from './useMergeRange';
+
 import {
     BasePicker,
     BasePickerProps,
@@ -30,8 +33,9 @@ export interface DatepickerProps<
     M extends boolean = boolean,
     R extends boolean = boolean,
 > extends BasePickerProps<V extends string ? V : V | string, M, R> {
-    type?: 'date' | 'datetime' | 'year' | 'month'
-    shortcuts?: Shortcut[]
+    type?: 'date' | 'datetime' | 'year' | 'month' | 'week' | 'quarter'
+    shortcuts?: Shortcut[],
+    isMerge?: boolean
 }
 
 export interface DatepickerEvents extends BasePickerEvents { }
@@ -43,13 +47,15 @@ export interface DatepickerBlocks<
 
 const typeDefs: Required<TypeDefs<DatepickerProps>> = {
     ...BasePicker.typeDefs,
-    type: ['date', 'datetime', 'year', 'month'],
+    type: ['date', 'datetime', 'year', 'month', 'week', 'quarter'],
     shortcuts: Array,
+    isMerge: Boolean
 };
 
 const defaults = (): Partial<DatepickerProps> => ({
     ...BasePicker.defaults(),
     type: 'date',
+    isMerge: false
 });
 
 export class Datepicker<
@@ -66,16 +72,18 @@ export class Datepicker<
     public panel = usePanel();
     public focusDate = useFocusDate();
     public value = useValue(this.formats, this.disabled, this.panel);
-
+    public activePosition = usePosition();
+    public mergeRange = useMergeRange(this.formats);
+    
     init() {
         super.init();
         provide(DATEPICKER, this);
         useKeyboards(this.panel.startRef, this.focusDate.focusDate);
+        this.activePosition.setupEventListeners();
     }
 
     protected getPlaceholder() {
         const {placeholder, type, range} = this.get();
-
         if (!isNullOrUndefined(placeholder)) return placeholder;
 
         switch (type) {
@@ -85,12 +93,22 @@ export class Datepicker<
                 return _$('请选择年份');
             case 'month':
                 return _$('请选择月份');
+            case 'week':
+                return _$('请选择周');
+            case 'quarter':
+                return _$('请选择季度');
             default:
                 return range ? _$('开始日期 ~ 结束日期') : _$('请选择日期');
         }
     }
 
     protected getLabel() {
+        const {multiple} = this.get();
+        if(multiple) {
+            const results = this.value.format();
+            const dayjsValue = this.value.getDayjsValue();
+            return this.mergeRange.formatMultipleValues(dayjsValue, results as string[]);
+        }
         return this.value.format();
     }
 

package/components/datepicker/index.vdt

@@ -5,7 +5,7 @@ import {DatepickerTime} from './time';
 import {Icon} from '../icon';
 import {Button} from '../button';
 import {_$} from '../../i18n';
-import {makePanelStyles} from './styles';
+import {makePanelStyles, makeDatePickRangeStyles} from './styles';
 import {PanelTypes, PanelFlags} from './usePanel';
 import {isFunction} from 'intact-shared';
 import {Tabs, Tab} from '../tabs';
@@ -19,61 +19,60 @@ const {
     onChangeDateForRange,
     getTimeValue,
 } = this.value;
+const { position, charLength, startTextLength, handleInputClick } = this.activePosition
 const { k } = this.config;
+const showPanel = range && position.value === 'end';
+const positionDisplay = !multiple && range && (type === 'datetime' || type === 'date');
+// 判断是否显示双面板
+const showDualPanels = range && (type === 'date' || type === 'month' || type === 'year')
+
 const classNameObj = {
     [`${k}-datepicker-content`]: true,
     [className]: className,
     [makePanelStyles(k)]: true,
 };
-
+const classDatePickerObj = {
+    [`${k}-datepicker`]: true,
+    [makeDatePickRangeStyles(k, position.value, positionDisplay, charLength.value, startTextLength.value)]: true,
+}
 const {isDisabledTime, isDisabledConfirm} = this.disabled;
 const {startPanel, endPanel, getPanel, startRef, endRef} = this.panel;
 const generatePanel = (flag) => {
     const panel = getPanel(flag);
     const timeValue = getTimeValue(flag);
+    let dateString = '0000-00-00';
+    let timeString = '00:00:00';
+
+    if (type === 'datetime' && timeValue) {
+        const valueString = this.formats.getShowString(timeValue).split(/\s+/);
+        dateString = valueString[0];
+        timeString = valueString[1];
+    }
+
     return (
-        <div class={`${k}-datepicker-calendar-wrapper`}>
-            {(() => {
-                if (type === 'datetime') {
-                    let dateString = '0000-00-00';
-                    let timeString = '00:00:00';
-                    if (timeValue) {
-                        const valueString = this.formats.getShowString(timeValue).split(/\s+/);
-                        dateString = valueString[0];
-                        timeString = valueString[1];
-                    }
-                    return (
-                        <Tabs type="card"
-                            value={panel.value}
-                            ev-$change:value={panel.set}
-                        >
-                            <Tab value={PanelTypes.Date}>{dateString}</Tab>
-                            <Tab value={PanelTypes.Time} disabled={!timeValue} >{timeString}</Tab>
-                        </Tabs>
-                    );
-                }
-            })()}
+        <div class={`${k}-datepicker-calendar-time-wrapper`}>
             <DatepickerCalendar
-                v-if={panel.value === PanelTypes.Date}
                 value={value}
                 ev-change={onChangeDate}
                 type={type === 'datetime' ? 'date' : type}
                 flag={flag}
                 ref={flag === PanelFlags.Start ? startRef : endRef}
             />
-            <DatepickerTime
-                v-else
-                value={timeValue}
-                ev-$change:value={v => onChangeTime(v, flag)}
-                format={this.formats.getValueFormat()}
-                flag={flag}
-                isDisabledTime={isDisabledTime}
-            />
+            <div class={`${k}-datepicker-time-wrapper`} v-if={type === 'datetime'}>
+                <div class={`${k}-datepicker-time-time`}>{timeString}</div> 
+                <DatepickerTime
+                    value={timeValue}
+                    ev-$change:value={v => onChangeTime(v, flag)}
+                    format={this.formats.getValueFormat()}
+                    flag={flag}
+                    isDisabledTime={isDisabledTime}
+                />
+            </div> 
         </div>
     );
 };
 
-<t:super class={`${k}-datepicker`}>
+<t:super class={classDatePickerObj} onClick={handleInputClick}>
     <b:base-menu>
         <DropdownMenu class={classNameObj}>
             <div class={`${k}-datepicker-shortcuts`} v-if={shortcuts && shortcuts.length}>
@@ -87,8 +86,8 @@ const generatePanel = (flag) => {
             </div>
             <div class={`${k}-datepicker-wrapper`}>
                 <div class={`${k}-datepicker-calendars`}>
-                    {generatePanel(PanelFlags.Start)}
-                    {range ? generatePanel(PanelFlags.End) : null}
+                    { showDualPanels ? generatePanel(PanelFlags.Start) : (showPanel ? null : generatePanel(PanelFlags.Start))}
+                    { showDualPanels ? generatePanel(PanelFlags.End) : (showPanel ? generatePanel(PanelFlags.End) : null)}
                 </div>
                 <div v-if={type === 'datetime'} class={`${k}-datepicker-footer`}>
                     <Button type="primary" size="small"

package/components/datepicker/styles.ts

@@ -11,7 +11,9 @@ const defaults = {
 
     item: {
         gutter: `7px`,
+        yearGutter: '36px',
         height: `24px`,
+        rangeGutter: `17px`,
         get hoverBgColor() { return theme.color.bg },
         get exceedColor() { return theme.color.disabled },
         get todayBorder() { return `1px solid ${theme.color.border}` },
@@ -49,6 +51,19 @@ const defaults = {
         padding: `8px 16px`,
     },
 
+    week: {
+        height: `20px`,
+        width: `40px`,
+        margin: `0 0 0 10px`,
+        padding: `0 2px`,
+        currentWeek: '#eee'
+    },
+    
+    calendarTime: {
+        height: `44px`,
+        fontSize: `14px`,
+    },
+
     shortcuts: {
         width: '100px',
         padding: '12px 0',
@@ -57,7 +72,7 @@ const defaults = {
             height: '32px',
             padding: '0 16px',
         }
-    }
+    },
 };
 
 let datepicker: typeof defaults;
@@ -103,12 +118,26 @@ export const makePanelStyles = cache(function makePanelStyles(k: string) {
                     width: 50%;
                 }
             }
+
+        }
+        .${k}-datepicker-calendar-time-wrapper {
+            display: flex;
+            .${k}-datepicker-time-time {
+                height: ${datepicker.calendarTime.height};
+                line-height: ${datepicker.calendarTime.height};
+                text-align: center;
+                font-size: ${datepicker.calendarTime.fontSize};
+            }
+            .${k}-datepicker-time-wrapper {
+                overflow: hidden;
+                height: 320px;
+            }
         }
         .${k}-datepicker-footer {
             border-top: ${datepicker.border};
             padding: ${datepicker.footer.padding};
             text-align: right;
-        }
+        } 
     `
 });
 
@@ -207,8 +236,56 @@ export const makeCalendarStyles = cache(function makeCalendarStyles(k: string) {
             grid-template-columns: repeat(7, 1fr);
         }
         .${k}-years {
+            .${k}-calendar-item {
+                height: 20px;
+                width: 40px;
+
+                &.${k}-in-range:after {
+                    width: calc(100% + 14px);
+                    left: calc(-${datepicker.item.yearGutter} / 2);
+                    padding: 0 calc(${datepicker.item.yearGutter} / 2);
+                }
+            }          
             display: grid;
-            grid-template-columns: repeat(4, 1fr);
+            justify-items: center;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 0; 
+        }
+        .${k}-weeks {
+            display: grid;
+            .week-row {
+                display: flex;
+                align-items: center;
+                width: ${datepicker.week.width};
+                margin: ${datepicker.week.margin};
+
+                .${k}-week-number {
+                    padding: ${datepicker.week.padding};
+                    cursor: pointer;
+                }    
+            }
+            .${k}-calendar-item {
+                height: ${datepicker.week.height};
+                &.${k}-today:not(:last-child) .${k}-value {
+                    background: ${datepicker.week.currentWeek};
+                    border: 0;
+                    &:after {
+                        content: '';
+                        display: block;
+                        position: absolute;
+                        box-sizing: content-box;
+                        background: ${datepicker.week.currentWeek};
+                        width: 100%;
+                        height: 100%;
+                        left: 0;
+                        padding: 0 ${datepicker.item.rangeGutter};
+                        z-index: -1; 
+                    }
+                }
+                &.${k}-today:last-child .${k}-value {
+                    border: 0;
+                }
+            }
         }
     `
 });
@@ -225,3 +302,25 @@ export const makeTimeStyles = cache(function makeTimeStyles(k: string) {
         }
     `;
 });
+
+export const makeDatePickRangeStyles = cache(function makeTimeStyles(k: string, activePositionValue: string, display: boolean, charLength: number = 10, startTextLength: number = 10) {
+    const displayType = display ? 'block' : 'none';
+    const charWidthPx = 8;
+    const highlightWidthPx = charLength * charWidthPx;
+    
+    // 计算结束文本的起始位置 - 紧接着开始文本
+    const endTextStartPos = startTextLength * charWidthPx;
+    
+    return css`
+        &:hover:before, &:focus:before{
+            content: '';
+            display: ${displayType};
+            width: ${highlightWidthPx}px;
+            height: 1px;
+            position: absolute;
+            background-color: ${datepicker.item.active.bgColor};
+            left: ${activePositionValue === 'start' ? '0' : endTextStartPos + 'px'};
+            bottom: 0;
+        }   
+    `;
+});