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

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

@@ -7,12 +7,13 @@ 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';
 export default function ($props, $blocks, $__proto__) {
   var _classNameObj,
+    _classDatePickerObj,
     _this = this;
   $blocks || ($blocks = {});
   $props || ($props = {});
@@ -30,8 +31,18 @@ export default function ($props, $blocks, $__proto__) {
     onChangeTime = _this$value.onChangeTime,
     onChangeDateForRange = _this$value.onChangeDateForRange,
     getTimeValue = _this$value.getTimeValue;
+  var _this$activePosition = this.activePosition,
+    position = _this$activePosition.position,
+    charLength = _this$activePosition.charLength,
+    startTextLength = _this$activePosition.startTextLength,
+    handleInputClick = _this$activePosition.handleInputClick;
   var k = this.config.k;
+  var showPanel = range && position.value === 'end';
+  var positionDisplay = !multiple && range && (type === 'datetime' || type === 'date');
+  // 判断是否显示双面板
+  var showDualPanels = range && (type === 'date' || type === 'month' || type === 'year');
   var classNameObj = (_classNameObj = {}, _classNameObj[k + "-datepicker-content"] = true, _classNameObj[className] = className, _classNameObj[makePanelStyles(k)] = true, _classNameObj);
+  var classDatePickerObj = (_classDatePickerObj = {}, _classDatePickerObj[k + "-datepicker"] = true, _classDatePickerObj[makeDatePickRangeStyles(k, position.value, positionDisplay, charLength.value, startTextLength.value)] = true, _classDatePickerObj);
   var _this$disabled = this.disabled,
     isDisabledTime = _this$disabled.isDisabledTime,
     isDisabledConfirm = _this$disabled.isDisabledConfirm;
@@ -44,36 +55,20 @@ export default function ($props, $blocks, $__proto__) {
   var generatePanel = function generatePanel(flag) {
     var panel = getPanel(flag);
     var timeValue = getTimeValue(flag);
-    return _$ce(2, 'div', [function () {
-      if (type === 'datetime') {
-        var dateString = '0000-00-00';
-        var timeString = '00:00:00';
-        if (timeValue) {
-          var valueString = _this.formats.getShowString(timeValue).split(/\s+/);
-          dateString = valueString[0];
-          timeString = valueString[1];
-        }
-        return _$cc(Tabs, {
-          'type': 'card',
-          'value': panel.value,
-          'ev-$change:value': panel.set,
-          'children': [_$cc(Tab, {
-            'value': PanelTypes.Date,
-            'children': dateString
-          }), _$cc(Tab, {
-            'value': PanelTypes.Time,
-            'disabled': !timeValue,
-            'children': timeString
-          })]
-        });
-      }
-    }(), panel.value === PanelTypes.Date ? _$cc(DatepickerCalendar, {
+    var dateString = '0000-00-00';
+    var timeString = '00:00:00';
+    if (type === 'datetime' && timeValue) {
+      var valueString = _this.formats.getShowString(timeValue).split(/\s+/);
+      dateString = valueString[0];
+      timeString = valueString[1];
+    }
+    return _$ce(2, 'div', [_$cc(DatepickerCalendar, {
       'value': value,
       'ev-change': onChangeDate,
       'type': type === 'datetime' ? 'date' : type,
       'flag': flag,
       'ref': flag === PanelFlags.Start ? startRef : endRef
-    }, null, flag === PanelFlags.Start ? startRef : endRef) : _$cc(DatepickerTime, {
+    }, null, flag === PanelFlags.Start ? startRef : endRef), type === 'datetime' ? _$ce(2, 'div', [_$ce(2, 'div', timeString, 0, _$cn(k + "-datepicker-time-time")), _$cc(DatepickerTime, {
       'value': timeValue,
       'ev-$change:value': function ev$changeValue(v) {
         return onChangeTime(v, flag);
@@ -81,10 +76,11 @@ export default function ($props, $blocks, $__proto__) {
       'format': _this.formats.getValueFormat(),
       'flag': flag,
       'isDisabledTime': isDisabledTime
-    })], 0, _$cn(k + "-datepicker-calendar-wrapper"));
+    })], 4, _$cn(k + "-datepicker-time-wrapper")) : undefined], 0, _$cn(k + "-datepicker-calendar-time-wrapper"));
   };
   return _$su.call($this, {
-    'className': _$cn(k + "-datepicker")
+    'className': _$cn(classDatePickerObj),
+    'onClick': handleInputClick
   }, function ($blocks) {
     var _$blocks = {},
       __$blocks = _$ex({}, $blocks);
@@ -98,7 +94,7 @@ export default function ($props, $blocks, $__proto__) {
             'title': label,
             'ev-click': linkEvent($value, _this2.setByShortcut)
           });
-        }), 0, _$cn(k + "-datepicker-shortcuts")) : undefined, _$ce(2, 'div', [_$ce(2, 'div', [generatePanel(PanelFlags.Start), _$ct('\n                    '), range ? generatePanel(PanelFlags.End) : null], 0, _$cn(k + "-datepicker-calendars")), type === 'datetime' ? _$ce(2, 'div', _$cc(Button, {
+        }), 0, _$cn(k + "-datepicker-shortcuts")) : undefined, _$ce(2, 'div', [_$ce(2, 'div', [showDualPanels ? generatePanel(PanelFlags.Start) : showPanel ? null : generatePanel(PanelFlags.Start), _$ct('\n                    '), showDualPanels ? generatePanel(PanelFlags.End) : showPanel ? generatePanel(PanelFlags.End) : null], 0, _$cn(k + "-datepicker-calendars")), type === 'datetime' ? _$ce(2, 'div', _$cc(Button, {
           'type': 'primary',
           'size': 'small',
           'disabled': isDisabledConfirm(),

package/es/components/datepicker/styles.d.ts

@@ -5,7 +5,9 @@ declare const defaults: {
     border: string;
     item: {
         gutter: string;
+        yearGutter: string;
         height: string;
+        rangeGutter: string;
         readonly hoverBgColor: string;
         readonly exceedColor: string;
         readonly todayBorder: string;
@@ -34,6 +36,17 @@ declare const defaults: {
     footer: {
         padding: string;
     };
+    week: {
+        height: string;
+        width: string;
+        margin: string;
+        padding: string;
+        currentWeek: string;
+    };
+    calendarTime: {
+        height: string;
+        fontSize: string;
+    };
     shortcuts: {
         width: string;
         padding: string;
@@ -58,3 +71,7 @@ export declare const makeTimeStyles: {
     (k: string): string;
     clearCache(): {};
 };
+export declare const makeDatePickRangeStyles: {
+    (k: string, activePositionValue: string, display: boolean, charLength?: number | undefined, startTextLength?: number | undefined): string;
+    clearCache(): {};
+};

package/es/components/datepicker/styles.js

@@ -9,7 +9,9 @@ var defaults = {
   border: "1px solid #e5e5e5",
   item: {
     gutter: "7px",
+    yearGutter: '36px',
     height: "24px",
+    rangeGutter: "17px",
     get hoverBgColor() {
       return theme.color.bg;
     },
@@ -52,6 +54,17 @@ var defaults = {
   footer: {
     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',
@@ -75,11 +88,25 @@ setDefault(function () {
 });
 export { datepicker };
 export var makePanelStyles = cache(function makePanelStyles(k) {
-  return /*#__PURE__*/css("display:flex;.", k, "-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.", k, "-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.", k, "-datepicker-calendars{display:flex;}.", k, "-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.", k, "-tabs{border:none;.", k, "-tabs-wrapper{float:none;}.", k, "-tab{width:50%;}}}.", k, "-datepicker-footer{border-top:", datepicker.border, ";padding:", datepicker.footer.padding, ";text-align:right;}");
+  return /*#__PURE__*/css("display:flex;.", k, "-datepicker-shortcuts{width:", datepicker.shortcuts.width, ";padding:", datepicker.shortcuts.padding, ";border-right:", datepicker.border, ";}.", k, "-datepicker-shortcut{height:", datepicker.shortcuts.shortcut.height, ";line-height:", datepicker.shortcuts.shortcut.height, ";padding:", datepicker.shortcuts.shortcut.padding, ";cursor:pointer;&:hover{background:", datepicker.shortcuts.shortcut.hoverBgcolor, ";}}.", k, "-datepicker-calendars{display:flex;}.", k, "-datepicker-calendar-wrapper{&:nth-child(2){border-left:", datepicker.border, ";}.", k, "-tabs{border:none;.", k, "-tabs-wrapper{float:none;}.", k, "-tab{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;}");
 });
 export var makeCalendarStyles = cache(function makeCalendarStyles(k) {
-  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.", k, "-prev .", k, "-icon,.", k, "-next .", k, "-icon{margin:0 -5px!important;}.", k, "-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.", k, "-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.", k, "-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.", k, "-weekday{flex:1;text-align:center;}.", k, "-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.", k, "-value{border-radius:", datepicker.item.borderRadius, ";}&.", k, "-hover{background:", datepicker.item.hoverBgColor, ";}&.", k, "-exceed{color:", datepicker.item.exceedColor, ";}&.", k, "-today .", k, "-value{border:", datepicker.item.todayBorder, ";}&.", k, "-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.", k, "-today .", k, "-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.", k, "-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.", k, "-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.", k, "-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.", k, "-days{display:grid;grid-template-columns:repeat(7, 1fr);}.", k, "-years{display:grid;grid-template-columns:repeat(4, 1fr);}");
+  return /*#__PURE__*/css("padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-datepicker-month{display:flex;padding:", datepicker.month.padding, ";}.", k, "-prev .", k, "-icon,.", k, "-next .", k, "-icon{margin:0 -5px!important;}.", k, "-month-values{flex:1;font-size:14px;text-align:center;cursor:pointer;overflow:hidden;position:relative;}.", k, "-month-value{margin:0 ", datepicker.month.valueGap, ";line-height:", theme.small.height, ";&:hover{color:", theme.color.primary, ";}},.", k, "-weekdays{display:flex;border-bottom:", datepicker.border, ";padding:", datepicker.weekday.padding, ";}.", k, "-weekday{flex:1;text-align:center;}.", k, "-calendar-item{text-align:center;margin:", datepicker.item.gutter, ";aspect-ratio:1;display:flex;align-items:center;cursor:pointer;position:relative;border-radius:", datepicker.item.borderRadius, ";.", k, "-value{border-radius:", datepicker.item.borderRadius, ";}&.", k, "-hover{background:", datepicker.item.hoverBgColor, ";}&.", k, "-exceed{color:", datepicker.item.exceedColor, ";}&.", k, "-today .", k, "-value{border:", datepicker.item.todayBorder, ";}&.", k, "-active{background:", datepicker.item.active.bgColor, ";color:", datepicker.item.active.color, ";&.", k, "-today .", k, "-value{border-color:", datepicker.item.active.todayBorderColor, ";}}&.", k, "-disabled{color:", datepicker.item.disabled.color, ";cursor:not-allowed;background:", datepicker.item.disabled.hoverBgColor, ";}&.", k, "-in-range:after{content:'';display:block;position:absolute;box-sizing:content-box;background:", datepicker.item.range.bgColor, ";width:100%;height:100%;left:-", datepicker.item.gutter, ";padding:0 ", datepicker.item.gutter, ";z-index:-1;}.", k, "-value{flex:1;display:flex;align-items:center;justify-content:center;height:100%;}}.", k, "-days{display:grid;grid-template-columns:repeat(7, 1fr);}.", k, "-years{display:grid;justify-items:center;grid-template-columns:repeat(3, 1fr);gap:0;.", 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);}}}.", 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;}}}");
 });
 export var makeTimeStyles = cache(function makeTimeStyles(k) {
   return /*#__PURE__*/css("display:flex;padding:", datepicker.padding, ";width:", datepicker.width, ";position:relative;.", k, "-scroll-select{flex:1;height:305px;}");
+});
+export var makeDatePickRangeStyles = cache(function makeTimeStyles(k, activePositionValue, display, charLength, startTextLength) {
+  if (charLength === void 0) {
+    charLength = 10;
+  }
+  if (startTextLength === void 0) {
+    startTextLength = 10;
+  }
+  var displayType = display ? 'block' : 'none';
+  var charWidthPx = 8;
+  var highlightWidthPx = charLength * charWidthPx;
+  // 计算结束文本的起始位置 - 紧接着开始文本
+  var endTextStartPos = startTextLength * charWidthPx;
+  return /*#__PURE__*/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;}");
 });

package/es/components/datepicker/useDisabled.d.ts

@@ -1,9 +1,9 @@
 import { State } from '../../hooks/useState';
-import { Dayjs, OpUnitType } from 'dayjs';
+import { Dayjs, OpUnitType, QUnitType } from './dayjs';
 import type { useFormats } from './useFormats';
 import { PanelFlags } from './usePanel';
 export declare function useDisabled({ createDateByValueFormat }: ReturnType<typeof useFormats>): {
-    isDisabled: (value: Dayjs, type?: OpUnitType) => boolean;
+    isDisabled: (value: Dayjs, type?: OpUnitType | QUnitType) => boolean;
     isDisabledTime: (value: Dayjs, flag: PanelFlags) => boolean;
     isDisabledConfirm: () => boolean;
     maxDate: State<Dayjs | null>;

package/es/components/datepicker/useDisabled.js

@@ -48,7 +48,7 @@ export function useDisabled(_ref) {
     if (!lastValue) return true;
     var _instance$get2 = instance.get(),
       range = _instance$get2.range;
-    if (range && lastValue.length < 2) return true;
+    if (range && lastValue.length === 1) return false;
     var _instance$panel = instance.panel,
       startPanel = _instance$panel.startPanel,
       endPanel = _instance$panel.endPanel;

package/es/components/datepicker/useFormats.js

@@ -5,7 +5,9 @@ var FORMATS = {
   date: 'YYYY-MM-DD',
   datetime: 'YYYY-MM-DD HH:mm:ss',
   year: 'YYYY',
-  month: 'YYYY-MM'
+  month: 'YYYY-MM',
+  quarter: 'YYYY-[Q]Q',
+  week: 'YYYY-w[周]'
 };
 export function useFormats() {
   var instance = useInstance();

package/es/components/datepicker/useMergeRange.d.ts

@@ -0,0 +1,5 @@
+import { DayjsValue } from './basepicker';
+import type { useFormats } from './useFormats';
+export declare function useMergeRange(formats: ReturnType<typeof useFormats>): {
+    formatMultipleValues: (dayjsValue: DayjsValue, results: string[]) => string[];
+};

package/es/components/datepicker/useMergeRange.js

@@ -0,0 +1,50 @@
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js/instance/sort";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js/instance/filter";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/slice";
+import { useInstance } from 'intact';
+export function useMergeRange(formats) {
+  var instance = useInstance();
+  function _mergeRanges(dayjsValue, getShowString) {
+    var _context, _context2;
+    var ranges = _sortInstanceProperty(_context = _mapInstanceProperty(_context2 = _filterInstanceProperty(dayjsValue).call(dayjsValue, Array.isArray)).call(_context2, function (range) {
+      return {
+        start: range[0],
+        end: range[1]
+      };
+    })).call(_context, function (a, b) {
+      return a.start.valueOf() - b.start.valueOf();
+    });
+    if (ranges.length === 0) return [];
+    // 合并有交集的时间范围
+    var mergedRange = ranges.reduce(function (acc, curr) {
+      if (!acc) return curr;
+      return {
+        start: acc.start,
+        end: curr.end.valueOf() > acc.end.valueOf() ? curr.end : acc.end
+      };
+    });
+    return [getShowString(mergedRange.start) + " ~ " + getShowString(mergedRange.end)];
+  }
+  function formatMultipleValues(dayjsValue, results) {
+    var _instance$get = instance.get(),
+      isMerge = _instance$get.isMerge,
+      nowrap = _instance$get.nowrap;
+    if (isMerge && nowrap) {
+      var mergedResults = _mergeRanges(dayjsValue, function (v) {
+        return v.format(formats.getShowFormat());
+      });
+      if (mergedResults.length > 0) {
+        var _context3, _context4;
+        return _concatInstanceProperty(_context3 = []).call(_context3, mergedResults, _mapInstanceProperty(_context4 = _sliceInstanceProperty(results).call(results, 1)).call(_context4, function (result, index) {
+          return result + "-" + index;
+        }));
+      }
+    }
+    return results;
+  }
+  return {
+    formatMultipleValues: formatMultipleValues
+  };
+}

package/es/components/datepicker/usePosition.d.ts

@@ -0,0 +1,10 @@
+export declare function usePosition(): {
+    position: import("../../hooks/useState").State<"end" | "start">;
+    charLength: import("../../hooks/useState").State<number>;
+    startTextLength: import("../../hooks/useState").State<number>;
+    handleInputClick: (e: MouseEvent) => void;
+    resetPosition: (pos?: 'start' | 'end') => void;
+    togglePosition: () => void;
+    setupEventListeners: () => void;
+    resetToStart: () => void;
+};

package/es/components/datepicker/usePosition.js

@@ -0,0 +1,166 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js/instance/includes";
+import { useInstance } from 'intact';
+import { useState } from '../../hooks/useState';
+import { last } from '../utils';
+export function usePosition() {
+  var instance = useInstance();
+  var position = useState('start');
+  // 根据类型获取默认字符长度
+  function getDefaultCharLength() {
+    var _instance$get = instance.get(),
+      type = _instance$get.type;
+    switch (type) {
+      case 'datetime':
+        return 16;
+      // "2025-07-10 00:00:00" 
+      case 'date':
+        return 10;
+      // "2025-07-09" 
+      default:
+        return 10;
+    }
+  }
+  var charLength = useState(getDefaultCharLength()); // 当前活动部分的字符长度
+  var startTextLength = useState(getDefaultCharLength()); // 开始文本的长度，用于计算结束文本位置
+  // 监听类型变化，更新默认字符长度
+  instance.watch('type', function () {
+    var defaultLength = getDefaultCharLength();
+    charLength.set(defaultLength);
+    startTextLength.set(defaultLength);
+  });
+  function handleInputClick(e) {
+    var _context;
+    var _instance$get2 = instance.get(),
+      range = _instance$get2.range,
+      type = _instance$get2.type;
+    if (!range) {
+      return;
+    }
+    // 对于日期时间范围选择器，如果当前没有值或值不完整，总是设置为开始时间
+    if (type === 'datetime') {
+      var currentValue = instance.value.value.value;
+      var lastValue = last(currentValue);
+      // 如果没有值或者当前范围值不完整（只有开始时间没有结束时间），强制设置为开始时间
+      if (!lastValue || !Array.isArray(lastValue) || lastValue.length < 2 || !lastValue[1]) {
+        position.set('start');
+        return;
+      }
+    }
+    // 获取事件目标元素  
+    var target = e.currentTarget;
+    // 如果目标元素不是 .k-select-main，则查找父元素  
+    if (!target.classList.contains(".k-select-main")) {
+      target = target.closest(".k-select-main");
+      if (!target) return;
+    }
+    var hiddenInput = target.querySelector('input[type="hidden"]');
+    var _target$getBoundingCl = target.getBoundingClientRect(),
+      totalVisualWidth = _target$getBoundingCl.width;
+    var midPoint;
+    if (hiddenInput && hiddenInput.value && _includesInstanceProperty(_context = hiddenInput.value).call(_context, ',')) {
+      // 分割字符串获取开始和结束日期的文本
+      var _hiddenInput$value$sp = hiddenInput.value.split(','),
+        startText = _hiddenInput$value$sp[0],
+        endText = _hiddenInput$value$sp[1];
+      // 确保两部分都存在，避免计算错误
+      if (startText && endText) {
+        var totalCharLength = startText.length + endText.length;
+        // 计算开始日期文本长度所占的比例
+        var startRatio = startText.length / totalCharLength;
+        // 估算每个字符的宽度（与样式中保持一致）
+        var charWidthPx = 8;
+        // 计算实际文本占用的宽度
+        var startTextWidth = startText.length * charWidthPx;
+        var endTextWidth = endText.length * charWidthPx;
+        var separatorWidth = 3 * charWidthPx; // " ~ " 大约3个字符宽度
+        var totalTextWidth = startTextWidth + separatorWidth + endTextWidth;
+        // 如果文本宽度超过input宽度，使用比例分割
+        if (totalTextWidth >= totalVisualWidth) {
+          midPoint = totalVisualWidth * startRatio;
+        } else {
+          // 如果文本宽度小于input宽度，使用实际文本宽度计算分割点
+          midPoint = startTextWidth + separatorWidth / 2;
+        }
+        // 更新开始文本长度状态，限制为默认长度以保证结束时间高亮位置正确
+        startTextLength.set(Math.min(startText.length, getDefaultCharLength()));
+      } else {
+        // 如果值格式不正确（例如 "2025-07-09,"），则退回使用几何中心点
+        var defaultLength = getDefaultCharLength();
+        charLength.set(defaultLength);
+        startTextLength.set(defaultLength);
+        midPoint = totalVisualWidth / 2;
+      }
+    } else {
+      // 如果没有找到 hiddenInput 或其值不是范围，则退回原始的几何中心点
+      var _defaultLength = getDefaultCharLength();
+      charLength.set(_defaultLength);
+      startTextLength.set(_defaultLength);
+      midPoint = totalVisualWidth / 2;
+    }
+    // 计算相对于 target 的 offsetX  
+    var rect = target.getBoundingClientRect();
+    var offsetX = e.clientX - rect.left;
+    // 根据点击位置判断是点击了左半边（开始）还是右半边（结束）
+    if (offsetX < midPoint) {
+      var _context2;
+      position.set('start');
+      // 更新为开始部分的字符长度，限制为默认长度
+      if (hiddenInput && hiddenInput.value && _includesInstanceProperty(_context2 = hiddenInput.value).call(_context2, ',')) {
+        var _hiddenInput$value$sp2 = hiddenInput.value.split(','),
+          _startText = _hiddenInput$value$sp2[0];
+        charLength.set(Math.min(_startText.length, getDefaultCharLength()));
+      }
+    } else {
+      var _context3;
+      position.set('end');
+      // 更新为结束部分的字符长度，限制为默认长度
+      if (hiddenInput && hiddenInput.value && _includesInstanceProperty(_context3 = hiddenInput.value).call(_context3, ',')) {
+        var _hiddenInput$value$sp3 = hiddenInput.value.split(','),
+          _endText = _hiddenInput$value$sp3[1];
+        charLength.set(Math.min(_endText.length, getDefaultCharLength()));
+      }
+    }
+  }
+  // 重置位置到指定值
+  function resetPosition(pos) {
+    if (pos === void 0) {
+      pos = 'start';
+    }
+    if (position.value === pos) {
+      return;
+    }
+    position.set(pos);
+  }
+  // 切换位置
+  function togglePosition() {
+    var currentPosition = position.value;
+    if (currentPosition === 'start') {
+      position.set('end');
+    } else {
+      position.set('start');
+    }
+  }
+  // 在组件初始化时设置事件监听
+  function setupEventListeners() {
+    // instance.on('resetPosition', resetPosition);
+    instance.on('togglePosition', togglePosition);
+  }
+  function resetToStart() {
+    var _instance$get3 = instance.get(),
+      range = _instance$get3.range,
+      type = _instance$get3.type;
+    if (range && type === 'date') {
+      position.set('start');
+    }
+  }
+  return {
+    position: position,
+    charLength: charLength,
+    startTextLength: startTextLength,
+    handleInputClick: handleInputClick,
+    resetPosition: resetPosition,
+    togglePosition: togglePosition,
+    setupEventListeners: setupEventListeners,
+    resetToStart: resetToStart
+  };
+}

package/es/components/datepicker/useQuarters.d.ts

@@ -0,0 +1,15 @@
+import dayjs, { Dayjs } from 'dayjs';
+import { State } from '../../hooks/useState';
+import type { useStatus } from './useStatus';
+export declare function useQuarters(showDate: State<Dayjs>, status: ReturnType<typeof useStatus>, focusDate: State<Dayjs | null>): {
+    getQuarters: (now: Dayjs) => {
+        isActive: boolean;
+        isToday: boolean;
+        isDisabled: boolean;
+        isHover: boolean;
+        isInRange: boolean;
+        label: string;
+        value: dayjs.Dayjs;
+    }[];
+    onClick: (date: Dayjs) => void;
+};

package/es/components/datepicker/useQuarters.js

@@ -0,0 +1,36 @@
+import { useInstance } from 'intact';
+import dayjs from 'dayjs';
+import { isEqual } from './helpers';
+import { _$ } from '../../i18n';
+export function useQuarters(showDate, status, focusDate) {
+  var instance = useInstance();
+  function getQuarters(now) {
+    var ret = [];
+    var year = showDate.value.year();
+    for (var i = 1; i <= 4; i++) {
+      var quarterStart = dayjs().year(year).quarter(i).startOf('quarter');
+      ret.push({
+        isActive: status.isActive(quarterStart, 'quarter'),
+        isToday: now.isSame(quarterStart, 'quarter'),
+        isDisabled: status.isDisabled(quarterStart),
+        isHover: isEqual(quarterStart, focusDate.value, 'quarter'),
+        isInRange: status.isInRange(quarterStart, 'quarter'),
+        label: _$("Q" + i),
+        value: quarterStart
+      });
+    }
+    return ret;
+  }
+  function onClick(date) {
+    var quarterStart = date.startOf('quarter');
+    showDate.set(quarterStart);
+    var datepickerType = instance.datepicker.get('type');
+    if (datepickerType === 'quarter') {
+      instance.triggerChange(quarterStart);
+    }
+  }
+  return {
+    getQuarters: getQuarters,
+    onClick: onClick
+  };
+}

package/es/components/datepicker/useShowDate.d.ts

@@ -5,7 +5,7 @@ export declare function useShowDate(panel: ReturnType<typeof usePanel>): {
     date: import("../../hooks/useState").State<Dayjs>;
     getDateLabel: () => {
         value: string;
-        onClick(e: IgnoreClickEvent): void;
+        onClick: (e: IgnoreClickEvent) => void;
     }[];
     prevMonth: () => void;
     nextMonth: () => void;

package/es/components/datepicker/useShowDate.js

@@ -67,29 +67,62 @@ export function useShowDate(panel) {
       case 'month':
         return date.add(isEnd ? 1 : -1, 'year');
         break;
+      case 'week':
+        return date.add(isEnd ? 1 : -1, 'week');
+        break;
+      case 'quarter':
+        return date.add(isEnd ? 1 : -1, 'quarter');
+        break;
       default:
         return date.add(isEnd ? 1 : -1, 'month');
         break;
     }
   }
   function getDateLabel() {
+    var year = showDate.value.get('year');
+    var month = showDate.value.get('month') + 1;
     var map = {
-      MM: _$(showDate.value.get('month') + 1 + "\u6708"),
-      YYYY: _$("{n}\u5E74", {
-        n: showDate.value.get('year')
-      })
+      'MM': _$(month + "\u6708"),
+      'YYYY': _$("{n}\u5E74", {
+        n: year
+      }),
+      'YYYY MM': _$("{n}\u5E74{y}\u6708", {
+        n: year,
+        y: month
+      }) // 年月组合标签
     };
-    var yearMonthFormat = _$('yearMonthFormat');
-    if (yearMonthFormat === 'yearMonthFormat') {
-      yearMonthFormat = 'YYYY MM';
+    var format;
+    switch (type) {
+      case 'week':
+        format = ['YYYY MM']; // week 类型显示年月组合
+        break;
+      case 'quarter':
+        format = ['YYYY']; // quarter 类型仅显示年
+        break;
+      default:
+        var yearMonthFormat = _$('yearMonthFormat');
+        if (yearMonthFormat === 'yearMonthFormat') {
+          yearMonthFormat = 'YYYY MM'; // 默认格式
+        }
+        format = yearMonthFormat.split(' '); // 其他类型按配置拆分
+        break;
     }
-    var format = yearMonthFormat.split(' ');
+    // 根据 type 动态调整显示的格式
     return _mapInstanceProperty(format).call(format, function (item) {
       return {
         value: map[item],
         onClick: function onClick(e) {
           e._ignore = true;
-          instance.type.set(item === 'YYYY' ? 'year' : 'month');
+          // 根据点击的项设置不同的 type
+          if (item === 'YYYY MM') {
+            instance.type.set('week'); // 点击年月组合，保持 week
+          } else if (item === 'YYYY') {
+            instance.type.set(type === 'quarter' ? 'quarter' : 'year'); // 根据当前 type 决定
+          } else if (item === 'MM') {
+            instance.type.set('month'); // 点击月，切换到 month
+          } else {
+            instance.type.set('date'); // 默认切换到 date
+          }
         }
       };
     });

package/es/components/datepicker/useStatus.d.ts

@@ -4,5 +4,5 @@ import type { DatepickerCalendarProps } from './calendar';
 export declare function useStatus(focusDate: State<Dayjs | null>): {
     isActive: (date: Dayjs, type: DatepickerCalendarProps['type']) => boolean;
     isInRange: (date: Dayjs, type: DatepickerCalendarProps['type']) => boolean;
-    isDisabled: (value: Dayjs, type?: import("dayjs").OpUnitType) => boolean;
+    isDisabled: (value: Dayjs, type?: "h" | "s" | "y" | "date" | "month" | "week" | "millisecond" | "second" | "minute" | "hour" | "day" | "year" | "milliseconds" | "seconds" | "minutes" | "hours" | "days" | "months" | "years" | "dates" | "d" | "D" | "M" | "m" | "ms" | "weeks" | "w" | "quarter" | "quarters" | "Q") => boolean;
 };

package/es/components/datepicker/useValue.d.ts

@@ -10,6 +10,7 @@ export declare function useValue(formats: ReturnType<typeof useFormats>, disable
     getTimeValue: (flag: PanelFlags) => dayjs.Dayjs | null | undefined;
     convertToDayjs: (v: import("./basepicker").Value | [import("./basepicker").Value, import("./basepicker").Value] | import("./basepicker").Value[] | [import("./basepicker").Value, import("./basepicker").Value][] | null | undefined) => DayjsValue;
     getDayjsValue: () => DayjsValue;
+    setMoment: () => void;
     value: import("../../hooks/useState").State<import("./basepicker").StateValue>;
     setValue: (v: StateValueItem, fromInput: boolean) => void;
     onChangeDate: (v: Dayjs, flag: PanelFlags) => void;