@baishuyun/ai-design 2.0.38 → 2.1.0-alpha.0

package/src/components/agent-helper/date-picker/date-picker.tsx

@@ -1,327 +1,327 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { cn } from '../../../lib/utils';
-import { CalendarPanel } from './calendar-panel';
-import { MonthPanel } from './month-panel';
-import { YearPanel } from './year-panel';
-import { TimePanel } from './time-panel';
-import { FooterPanel } from './footer-panel';
-import {
-  MIN_YEAR,
-  MAX_YEAR,
-  MONTH_NAMES,
-  getDaysInMonth,
-  checkDateValidate,
-  getCloserDate,
-} from './utils';
-import type { DatePickerProps, TimeObj } from './types';
-
-export type { DateFormat, DatePickerProps } from './types';
-
-export function DatePicker({
-  value,
-  onChange,
-  format = 'yyyy-MM-dd',
-  minDate: minDateProp,
-  maxDate: maxDateProp,
-  week: weekProp,
-  className,
-}: DatePickerProps) {
-  const initialDate = value ? new Date(value) : new Date();
-
-  const [year, setYear] = useState(initialDate.getFullYear());
-  const [month, setMonth] = useState(initialDate.getMonth());
-  const [day, setDay] = useState(initialDate.getDate());
-  const [hours, setHours] = useState(initialDate.getHours());
-  const [minutes, setMinutes] = useState(initialDate.getMinutes());
-  const [seconds, setSeconds] = useState(initialDate.getSeconds());
-  const [showMonth, setShowMonth] = useState(false);
-  const [showYear, setShowYear] = useState(false);
-  const [showHms, setShowHms] = useState(format.includes('HH'));
-
-  const minDate = useMemo(
-    () => minDateProp ?? new Date(MIN_YEAR, 0, 1, 0, 0, 0, 0),
-    [minDateProp]
-  );
-  const maxDate = useMemo(
-    () => maxDateProp ?? new Date(MAX_YEAR, 11, 31, 23, 59, 59, 999),
-    [maxDateProp]
-  );
-  const week = useMemo(
-    () => (weekProp ? weekProp.map((i) => parseInt(String(i))) : []),
-    [weekProp]
-  );
-
-  const startTime = useMemo<TimeObj>(() => {
-    if (format === 'yyyy-MM-dd HH:mm:ss') {
-      return { h: minDate.getHours(), m: minDate.getMinutes(), s: minDate.getSeconds(), ms: minDate.getMilliseconds() };
-    }
-    return { h: 0, m: 0, s: 0, ms: 0 };
-  }, [format, minDate]);
-
-  const endTime = useMemo<TimeObj>(() => {
-    if (format === 'yyyy-MM-dd HH:mm:ss') {
-      return { h: maxDate.getHours(), m: maxDate.getMinutes(), s: maxDate.getSeconds(), ms: maxDate.getMilliseconds() };
-    }
-    return { h: 23, m: 59, s: 59, ms: 999 };
-  }, [format, maxDate]);
-
-  // Sync with external value
-  useEffect(() => {
-    if (value) {
-      setYear(value.getFullYear());
-      setMonth(value.getMonth());
-      setDay(value.getDate());
-      setHours(value.getHours());
-      setMinutes(value.getMinutes());
-      setSeconds(value.getSeconds());
-    }
-  }, [value]);
-
-  // Auto-select closer valid date on mount when value is null
-  useEffect(() => {
-    if (!value && checkDateValidate(new Date(), minDate, maxDate, week, 'day')) {
-      const closerDate = getCloserDate(new Date(), minDate, maxDate);
-      setYear(closerDate.getFullYear());
-      setMonth(closerDate.getMonth());
-      setDay(closerDate.getDate());
-    }
-  }, []);
-
-  const fireOnChange = useCallback(
-    (d: Date | null, closeFloat?: boolean) => onChange?.(d, closeFloat),
-    [onChange]
-  );
-
-  const checkValidate = useCallback(
-    (d: Date, mode: 'day' | 'month' | 'year' = 'day') =>
-      checkDateValidate(d, minDate, maxDate, week, mode),
-    [minDate, maxDate, week]
-  );
-
-  const onDateUpdate = useCallback(
-    (closeFloat?: boolean) => {
-      const d = new Date(year, month, day, hours, minutes, seconds);
-      fireOnChange(checkValidate(d) ? d : null, closeFloat);
-    },
-    [year, month, day, hours, minutes, seconds, checkValidate, fireOnChange]
-  );
-
-  const handleMonthReduce = useCallback(() => {
-    let newYear = year, newMonth = month, newDay = day;
-    if (month === 0) { newMonth = 11; newYear = year - 1; }
-    else { newMonth = month - 1; }
-    const dim = getDaysInMonth(newYear, newMonth);
-    if (newDay > dim) newDay = dim;
-    setYear(newYear); setMonth(newMonth); setDay(newDay);
-  }, [year, month, day]);
-
-  const handleMonthAdd = useCallback(() => {
-    let newYear = year, newMonth = month, newDay = day;
-    if (month === 11) { newMonth = 0; newYear = year + 1; }
-    else { newMonth = month + 1; }
-    const dim = getDaysInMonth(newYear, newMonth);
-    if (newDay > dim) newDay = dim;
-    setYear(newYear); setMonth(newMonth); setDay(newDay);
-  }, [year, month, day]);
-
-  const handleYearReduce = useCallback(() => { if (year > MIN_YEAR) setYear((y) => y - 1); }, [year]);
-  const handleYearAdd = useCallback(() => { if (year < MAX_YEAR) setYear((y) => y + 1); }, [year]);
-  const handleYearFReduce = useCallback(() => { if (year > MIN_YEAR) setYear((y) => y - 20); }, [year]);
-  const handleYearFAdd = useCallback(() => { if (year < MAX_YEAR) setYear((y) => y + 20); }, [year]);
-
-  const handleSelectYear = useCallback((selectedYear: number) => {
-    setYear(selectedYear);
-    setShowYear(false);
-    if (format === 'yyyy-MM') { setDay(1); setHours(0); setMinutes(0); setSeconds(0); setShowMonth(false); }
-    if (format === 'yyyy') {
-      const newDate = new Date(selectedYear, 0, 1, 0, 0, 0);
-      fireOnChange(checkValidate(newDate, 'year') ? newDate : null, true);
-    }
-    setShowHms(format.includes('HH'));
-  }, [format, checkValidate, fireOnChange]);
-
-  const handleMountOk = useCallback((m: number) => {
-    setMonth(m);
-    setShowMonth(false);
-    setShowYear(false);
-    if (format === 'yyyy-MM') {
-      setDay(1); setHours(0); setMinutes(0); setSeconds(0);
-      const newDate = new Date(year, m, 1, 0, 0, 0);
-      fireOnChange(checkValidate(newDate, 'month') ? newDate : null, true);
-    }
-    setShowHms(format.includes('HH'));
-  }, [format, year, checkValidate, fireOnChange]);
-
-  const handleChangeDay = useCallback((d: number, m: number, y: number, css: string) => {
-    if (css.includes('disabled')) return;
-    setYear(y); setMonth(m); setDay(d);
-    if (!['HH:mm:ss', 'yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm', 'HH:mm'].includes(format)) {
-      const newDate = new Date(y, m, d, 0, 0, 0);
-      fireOnChange(checkValidate(newDate) ? newDate : null, true);
-    }
-  }, [format, checkValidate, fireOnChange]);
-
-  const handleToDay = useCallback(() => {
-    const today = new Date();
-    setYear(today.getFullYear()); setMonth(today.getMonth()); setDay(today.getDate());
-    setHours(today.getHours()); setMinutes(today.getMinutes()); setSeconds(today.getSeconds());
-    if (!['HH:mm:ss', 'yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm', 'HH:mm'].includes(format)) {
-      const newDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
-      fireOnChange(checkValidate(newDate) ? newDate : null, true);
-    }
-  }, [format, checkValidate, fireOnChange]);
-
-  const handleOkDay = useCallback(() => onDateUpdate(true), [onDateUpdate]);
-
-  const checkValiToday = useCallback(
-    (date?: Date) => checkDateValidate(date ?? new Date(), minDate, maxDate, week, 'day') ? '' : 'disabled',
-    [minDate, maxDate, week]
-  );
-
-  const handleHoursChange = useCallback((v: number) => setHours(v), []);
-  const handleMinutesChange = useCallback((v: number) => setMinutes(v), []);
-  const handleSecondsChange = useCallback((v: number) => setSeconds(v), []);
-
-  const hasDatePart = format.includes('yyyy');
-  const hasTimePart = format.includes('HH');
-  const hasDayPart = format.includes('dd');
-  const isMonthOnly = format === 'yyyy-MM';
-  const isYearOnly = format === 'yyyy';
-  const todayCls = checkValiToday();
-
-  const openMonthMenu = useCallback(() => { setShowMonth(true); setShowYear(false); setShowHms(false); }, []);
-  const openYearMenu = useCallback(() => { setShowYear(true); setShowHms(false); }, []);
-
-  const dataRangeMinHeight = hasDayPart ? 'min-h-[270px]' : (isMonthOnly ? 'min-h-[180px]' : 'min-h-[270px]');
-
-  return (
-    <div className={cn('relative inline-block text-sm text-[#333] bg-white rounded-[4px] leading-none border-none', format, className)}>
-      <div className="flex">
-        {hasDatePart && (
-          <div className={cn('data-range', dataRangeMinHeight)} style={{ minWidth: isYearOnly ? 220 : 270 }}>
-            {/* Calendar with day grid, OR month-only picker */}
-            {!isYearOnly && (
-              <div className="relative">
-                <table cellSpacing={0} cellPadding={0} className="dt p-[3px] rounded-[4px]" style={{ width: isMonthOnly ? '100%' : 270 }}>
-                  {/* Month-only: show month picker with year header */}
-                  {isMonthOnly && !showYear && (
-                    <>
-                      <thead>
-                        <tr>
-                          <td className="text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] btn prevy hover:text-[#0265ff] grid place-content-center" colSpan={1} onClick={handleYearReduce}>
-                            <ChevronLeft size={14} className="inline" />
-                          </td>
-                          <td className="text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] year title font-bold" colSpan={1}>
-                            <span className="title-year hover:text-[#0265ff] cursor-pointer" onClick={openYearMenu}>{year}</span>
-                          </td>
-                          <td className="text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] btn nexty hover:text-[#0265ff] grid place-content-center" colSpan={1} onClick={handleYearAdd}>
-                            <ChevronRight size={14} className="inline" />
-                          </td>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {[0, 1, 2].map((rowIdx) => (
-                          <tr key={rowIdx}>
-                            {[0, 1, 2].map((colIdx) => {
-                              const m = rowIdx * 3 + colIdx;
-                              const valid = checkValidate(new Date(year, m, 1), 'month');
-                              const isSelected = month === m;
-                              const isDisabled = !valid;
-                              return (
-                                <td
-                                  key={m}
-                                  className={cn(
-                                    'text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] month hover:bg-[rgba(2,101,255,0.08)]',
-                                    isSelected && 'font-bold p-[1px] text-white border border-[#0265ff] bg-[#0265ff] hover:border-[#0265ff] hover:bg-[#0265ff]',
-                                    isDisabled && 'text-[#999] relative pointer-events-none before:absolute before:left-0 before:right-0 before:top-[14px] before:h-[28px] before:bg-[#f3f3f3] before:opacity-60 before:content-[""]'
-                                  )}
-                                  onClick={() => { if (!isDisabled) handleMountOk(m); }}
-                                >
-                                  {MONTH_NAMES[m]}
-                                </td>
-                              );
-                            })}
-                          </tr>
-                        ))}
-                      </tbody>
-                    </>
-                  )}
-
-                  {/* Day grid: full calendar */}
-                  {hasDayPart && (
-                    <CalendarPanel
-                      year={year} month={month} day={day}
-                      format={format} minDate={minDate} maxDate={maxDate} week={week}
-                      onYearReduce={handleYearReduce} onYearAdd={handleYearAdd}
-                      onMonthReduce={handleMonthReduce} onMonthAdd={handleMonthAdd}
-                      onMonthMenu={openMonthMenu} onYearMenu={openYearMenu}
-                      onChangeDay={handleChangeDay}
-                    />
-                  )}
-                </table>
-
-                {/* Month picker overlay (for day formats) */}
-                {hasDayPart && !isMonthOnly && showMonth && !showYear && (
-                  <div className="absolute inset-0 z-[1]">
-                    <MonthPanel
-                      year={year} month={month} showYear={showYear}
-                      position="absolute" minDate={minDate} maxDate={maxDate} week={week}
-                      onYearReduce={handleYearReduce} onYearAdd={handleYearAdd}
-                      onYearMenu={openYearMenu} onMountOk={handleMountOk}
-                    />
-                  </div>
-                )}
-
-                {/* Year picker overlay (for day/month formats) */}
-                {!isYearOnly && showYear && (
-                  <div className={cn(isMonthOnly ? 'relative' : 'absolute inset-0 z-[1]')}>
-                    <YearPanel
-                      year={year} position={isMonthOnly ? 'relative' : 'absolute'}
-                      showYearLabel={isMonthOnly}
-                      minDate={minDate} maxDate={maxDate} week={week}
-                      onYearFReduce={handleYearFReduce} onYearFAdd={handleYearFAdd}
-                      onSelectYear={handleSelectYear}
-                    />
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* Year-only mode */}
-            {isYearOnly && (
-              <YearPanel
-                year={year} position="relative" showYearLabel
-                minDate={minDate} maxDate={maxDate} week={week}
-                onYearFReduce={handleYearFReduce} onYearFAdd={handleYearFAdd}
-                onSelectYear={handleSelectYear}
-              />
-            )}
-          </div>
-        )}
-
-        {/* Time picker */}
-        {showHms && hasTimePart && (
-          <TimePanel
-            hours={hours} minutes={minutes} seconds={seconds}
-            year={year} month={month} day={day}
-            format={format} minDate={minDate} maxDate={maxDate}
-            startTime={startTime} endTime={endTime}
-            onHoursChange={handleHoursChange}
-            onMinutesChange={handleMinutesChange}
-            onSecondsChange={handleSecondsChange}
-          />
-        )}
-      </div>
-
-      {/* Footer */}
-      <FooterPanel
-        hasTime={hasTimePart}
-        hasDay={hasDayPart}
-        todayCls={todayCls}
-        onToday={handleToDay}
-        onOk={handleOkDay}
-      />
-    </div>
-  );
-}
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { cn } from '../../../lib/utils';
+import { CalendarPanel } from './calendar-panel';
+import { MonthPanel } from './month-panel';
+import { YearPanel } from './year-panel';
+import { TimePanel } from './time-panel';
+import { FooterPanel } from './footer-panel';
+import {
+  MIN_YEAR,
+  MAX_YEAR,
+  MONTH_NAMES,
+  getDaysInMonth,
+  checkDateValidate,
+  getCloserDate,
+} from './utils';
+import type { DatePickerProps, TimeObj } from './types';
+
+export type { DateFormat, DatePickerProps } from './types';
+
+export function DatePicker({
+  value,
+  onChange,
+  format = 'yyyy-MM-dd',
+  minDate: minDateProp,
+  maxDate: maxDateProp,
+  week: weekProp,
+  className,
+}: DatePickerProps) {
+  const initialDate = value ? new Date(value) : new Date();
+
+  const [year, setYear] = useState(initialDate.getFullYear());
+  const [month, setMonth] = useState(initialDate.getMonth());
+  const [day, setDay] = useState(initialDate.getDate());
+  const [hours, setHours] = useState(initialDate.getHours());
+  const [minutes, setMinutes] = useState(initialDate.getMinutes());
+  const [seconds, setSeconds] = useState(initialDate.getSeconds());
+  const [showMonth, setShowMonth] = useState(false);
+  const [showYear, setShowYear] = useState(false);
+  const [showHms, setShowHms] = useState(format.includes('HH'));
+
+  const minDate = useMemo(
+    () => minDateProp ?? new Date(MIN_YEAR, 0, 1, 0, 0, 0, 0),
+    [minDateProp]
+  );
+  const maxDate = useMemo(
+    () => maxDateProp ?? new Date(MAX_YEAR, 11, 31, 23, 59, 59, 999),
+    [maxDateProp]
+  );
+  const week = useMemo(
+    () => (weekProp ? weekProp.map((i) => parseInt(String(i))) : []),
+    [weekProp]
+  );
+
+  const startTime = useMemo<TimeObj>(() => {
+    if (format === 'yyyy-MM-dd HH:mm:ss') {
+      return { h: minDate.getHours(), m: minDate.getMinutes(), s: minDate.getSeconds(), ms: minDate.getMilliseconds() };
+    }
+    return { h: 0, m: 0, s: 0, ms: 0 };
+  }, [format, minDate]);
+
+  const endTime = useMemo<TimeObj>(() => {
+    if (format === 'yyyy-MM-dd HH:mm:ss') {
+      return { h: maxDate.getHours(), m: maxDate.getMinutes(), s: maxDate.getSeconds(), ms: maxDate.getMilliseconds() };
+    }
+    return { h: 23, m: 59, s: 59, ms: 999 };
+  }, [format, maxDate]);
+
+  // Sync with external value
+  useEffect(() => {
+    if (value) {
+      setYear(value.getFullYear());
+      setMonth(value.getMonth());
+      setDay(value.getDate());
+      setHours(value.getHours());
+      setMinutes(value.getMinutes());
+      setSeconds(value.getSeconds());
+    }
+  }, [value]);
+
+  // Auto-select closer valid date on mount when value is null
+  useEffect(() => {
+    if (!value && checkDateValidate(new Date(), minDate, maxDate, week, 'day')) {
+      const closerDate = getCloserDate(new Date(), minDate, maxDate);
+      setYear(closerDate.getFullYear());
+      setMonth(closerDate.getMonth());
+      setDay(closerDate.getDate());
+    }
+  }, []);
+
+  const fireOnChange = useCallback(
+    (d: Date | null, closeFloat?: boolean) => onChange?.(d, closeFloat),
+    [onChange]
+  );
+
+  const checkValidate = useCallback(
+    (d: Date, mode: 'day' | 'month' | 'year' = 'day') =>
+      checkDateValidate(d, minDate, maxDate, week, mode),
+    [minDate, maxDate, week]
+  );
+
+  const onDateUpdate = useCallback(
+    (closeFloat?: boolean) => {
+      const d = new Date(year, month, day, hours, minutes, seconds);
+      fireOnChange(checkValidate(d) ? d : null, closeFloat);
+    },
+    [year, month, day, hours, minutes, seconds, checkValidate, fireOnChange]
+  );
+
+  const handleMonthReduce = useCallback(() => {
+    let newYear = year, newMonth = month, newDay = day;
+    if (month === 0) { newMonth = 11; newYear = year - 1; }
+    else { newMonth = month - 1; }
+    const dim = getDaysInMonth(newYear, newMonth);
+    if (newDay > dim) newDay = dim;
+    setYear(newYear); setMonth(newMonth); setDay(newDay);
+  }, [year, month, day]);
+
+  const handleMonthAdd = useCallback(() => {
+    let newYear = year, newMonth = month, newDay = day;
+    if (month === 11) { newMonth = 0; newYear = year + 1; }
+    else { newMonth = month + 1; }
+    const dim = getDaysInMonth(newYear, newMonth);
+    if (newDay > dim) newDay = dim;
+    setYear(newYear); setMonth(newMonth); setDay(newDay);
+  }, [year, month, day]);
+
+  const handleYearReduce = useCallback(() => { if (year > MIN_YEAR) setYear((y) => y - 1); }, [year]);
+  const handleYearAdd = useCallback(() => { if (year < MAX_YEAR) setYear((y) => y + 1); }, [year]);
+  const handleYearFReduce = useCallback(() => { if (year > MIN_YEAR) setYear((y) => y - 20); }, [year]);
+  const handleYearFAdd = useCallback(() => { if (year < MAX_YEAR) setYear((y) => y + 20); }, [year]);
+
+  const handleSelectYear = useCallback((selectedYear: number) => {
+    setYear(selectedYear);
+    setShowYear(false);
+    if (format === 'yyyy-MM') { setDay(1); setHours(0); setMinutes(0); setSeconds(0); setShowMonth(false); }
+    if (format === 'yyyy') {
+      const newDate = new Date(selectedYear, 0, 1, 0, 0, 0);
+      fireOnChange(checkValidate(newDate, 'year') ? newDate : null, true);
+    }
+    setShowHms(format.includes('HH'));
+  }, [format, checkValidate, fireOnChange]);
+
+  const handleMountOk = useCallback((m: number) => {
+    setMonth(m);
+    setShowMonth(false);
+    setShowYear(false);
+    if (format === 'yyyy-MM') {
+      setDay(1); setHours(0); setMinutes(0); setSeconds(0);
+      const newDate = new Date(year, m, 1, 0, 0, 0);
+      fireOnChange(checkValidate(newDate, 'month') ? newDate : null, true);
+    }
+    setShowHms(format.includes('HH'));
+  }, [format, year, checkValidate, fireOnChange]);
+
+  const handleChangeDay = useCallback((d: number, m: number, y: number, css: string) => {
+    if (css.includes('disabled')) return;
+    setYear(y); setMonth(m); setDay(d);
+    if (!['HH:mm:ss', 'yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm', 'HH:mm'].includes(format)) {
+      const newDate = new Date(y, m, d, 0, 0, 0);
+      fireOnChange(checkValidate(newDate) ? newDate : null, true);
+    }
+  }, [format, checkValidate, fireOnChange]);
+
+  const handleToDay = useCallback(() => {
+    const today = new Date();
+    setYear(today.getFullYear()); setMonth(today.getMonth()); setDay(today.getDate());
+    setHours(today.getHours()); setMinutes(today.getMinutes()); setSeconds(today.getSeconds());
+    if (!['HH:mm:ss', 'yyyy-MM-dd HH:mm:ss', 'yyyy-MM-dd HH:mm', 'HH:mm'].includes(format)) {
+      const newDate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 0, 0, 0);
+      fireOnChange(checkValidate(newDate) ? newDate : null, true);
+    }
+  }, [format, checkValidate, fireOnChange]);
+
+  const handleOkDay = useCallback(() => onDateUpdate(true), [onDateUpdate]);
+
+  const checkValiToday = useCallback(
+    (date?: Date) => checkDateValidate(date ?? new Date(), minDate, maxDate, week, 'day') ? '' : 'disabled',
+    [minDate, maxDate, week]
+  );
+
+  const handleHoursChange = useCallback((v: number) => setHours(v), []);
+  const handleMinutesChange = useCallback((v: number) => setMinutes(v), []);
+  const handleSecondsChange = useCallback((v: number) => setSeconds(v), []);
+
+  const hasDatePart = format.includes('yyyy');
+  const hasTimePart = format.includes('HH');
+  const hasDayPart = format.includes('dd');
+  const isMonthOnly = format === 'yyyy-MM';
+  const isYearOnly = format === 'yyyy';
+  const todayCls = checkValiToday();
+
+  const openMonthMenu = useCallback(() => { setShowMonth(true); setShowYear(false); setShowHms(false); }, []);
+  const openYearMenu = useCallback(() => { setShowYear(true); setShowHms(false); }, []);
+
+  const dataRangeMinHeight = hasDayPart ? 'min-h-[270px]' : (isMonthOnly ? 'min-h-[180px]' : 'min-h-[270px]');
+
+  return (
+    <div className={cn('relative inline-block text-sm text-[#333] bg-white rounded-[4px] leading-none border-none', format, className)}>
+      <div className="flex">
+        {hasDatePart && (
+          <div className={cn('data-range', dataRangeMinHeight)} style={{ minWidth: isYearOnly ? 220 : 270 }}>
+            {/* Calendar with day grid, OR month-only picker */}
+            {!isYearOnly && (
+              <div className="relative">
+                <table cellSpacing={0} cellPadding={0} className="dt p-[3px] rounded-[4px]" style={{ width: isMonthOnly ? '100%' : 270 }}>
+                  {/* Month-only: show month picker with year header */}
+                  {isMonthOnly && !showYear && (
+                    <>
+                      <thead>
+                        <tr>
+                          <td className="text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] btn prevy hover:text-[#0265ff] grid place-content-center" colSpan={1} onClick={handleYearReduce}>
+                            <ChevronLeft size={14} className="inline" />
+                          </td>
+                          <td className="text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] year title font-bold" colSpan={1}>
+                            <span className="title-year hover:text-[#0265ff] cursor-pointer" onClick={openYearMenu}>{year}</span>
+                          </td>
+                          <td className="text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] btn nexty hover:text-[#0265ff] grid place-content-center" colSpan={1} onClick={handleYearAdd}>
+                            <ChevronRight size={14} className="inline" />
+                          </td>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {[0, 1, 2].map((rowIdx) => (
+                          <tr key={rowIdx}>
+                            {[0, 1, 2].map((colIdx) => {
+                              const m = rowIdx * 3 + colIdx;
+                              const valid = checkValidate(new Date(year, m, 1), 'month');
+                              const isSelected = month === m;
+                              const isDisabled = !valid;
+                              return (
+                                <td
+                                  key={m}
+                                  className={cn(
+                                    'text-center p-0.5 min-w-[36px] h-[36px] cursor-pointer align-middle rounded-[4px] month hover:bg-[rgba(2,101,255,0.08)]',
+                                    isSelected && 'font-bold p-[1px] text-white border border-[#0265ff] bg-[#0265ff] hover:border-[#0265ff] hover:bg-[#0265ff]',
+                                    isDisabled && 'text-[#999] relative pointer-events-none before:absolute before:left-0 before:right-0 before:top-[14px] before:h-[28px] before:bg-[#f3f3f3] before:opacity-60 before:content-[""]'
+                                  )}
+                                  onClick={() => { if (!isDisabled) handleMountOk(m); }}
+                                >
+                                  {MONTH_NAMES[m]}
+                                </td>
+                              );
+                            })}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </>
+                  )}
+
+                  {/* Day grid: full calendar */}
+                  {hasDayPart && (
+                    <CalendarPanel
+                      year={year} month={month} day={day}
+                      format={format} minDate={minDate} maxDate={maxDate} week={week}
+                      onYearReduce={handleYearReduce} onYearAdd={handleYearAdd}
+                      onMonthReduce={handleMonthReduce} onMonthAdd={handleMonthAdd}
+                      onMonthMenu={openMonthMenu} onYearMenu={openYearMenu}
+                      onChangeDay={handleChangeDay}
+                    />
+                  )}
+                </table>
+
+                {/* Month picker overlay (for day formats) */}
+                {hasDayPart && !isMonthOnly && showMonth && !showYear && (
+                  <div className="absolute inset-0 z-[1]">
+                    <MonthPanel
+                      year={year} month={month} showYear={showYear}
+                      position="absolute" minDate={minDate} maxDate={maxDate} week={week}
+                      onYearReduce={handleYearReduce} onYearAdd={handleYearAdd}
+                      onYearMenu={openYearMenu} onMountOk={handleMountOk}
+                    />
+                  </div>
+                )}
+
+                {/* Year picker overlay (for day/month formats) */}
+                {!isYearOnly && showYear && (
+                  <div className={cn(isMonthOnly ? 'relative' : 'absolute inset-0 z-[1]')}>
+                    <YearPanel
+                      year={year} position={isMonthOnly ? 'relative' : 'absolute'}
+                      showYearLabel={isMonthOnly}
+                      minDate={minDate} maxDate={maxDate} week={week}
+                      onYearFReduce={handleYearFReduce} onYearFAdd={handleYearFAdd}
+                      onSelectYear={handleSelectYear}
+                    />
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Year-only mode */}
+            {isYearOnly && (
+              <YearPanel
+                year={year} position="relative" showYearLabel
+                minDate={minDate} maxDate={maxDate} week={week}
+                onYearFReduce={handleYearFReduce} onYearFAdd={handleYearFAdd}
+                onSelectYear={handleSelectYear}
+              />
+            )}
+          </div>
+        )}
+
+        {/* Time picker */}
+        {showHms && hasTimePart && (
+          <TimePanel
+            hours={hours} minutes={minutes} seconds={seconds}
+            year={year} month={month} day={day}
+            format={format} minDate={minDate} maxDate={maxDate}
+            startTime={startTime} endTime={endTime}
+            onHoursChange={handleHoursChange}
+            onMinutesChange={handleMinutesChange}
+            onSecondsChange={handleSecondsChange}
+          />
+        )}
+      </div>
+
+      {/* Footer */}
+      <FooterPanel
+        hasTime={hasTimePart}
+        hasDay={hasDayPart}
+        todayCls={todayCls}
+        onToday={handleToDay}
+        onOk={handleOkDay}
+      />
+    </div>
+  );
+}