@c2-markdown-ui/react 0.4.4 → 0.4.5

package/src/widgets/DatePicker.tsx

@@ -1,434 +1,451 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-
-export interface DatePickerProps {
-  label?: string;
-  /** 选择模式：date 仅日期（默认）/ datetime 日期+时间 */
-  picker?: 'date' | 'datetime';
-  /** 范围选择（antd RangePicker 效果：双月历面板） */
-  range?: boolean;
-  /** 默认值：时间戳（毫秒）或格式化时间字符串；range 模式为 [start, end] */
-  default?: number | string | (number | string)[];
-  /** 显示格式：默认按模式推导——date 为 YYYY-MM-DD，datetime 为 YYYY-MM-DD HH:mm:ss */
-  format?: string;
-  placeholder?: string;
-  /** 禁用当前日期之前的日期 */
-  disableBeforeNow?: boolean;
-  /** 禁用当前日期之后的日期 */
-  disableAfterNow?: boolean;
-  hint?: string;
-  required?: boolean;
-  /** 校验失败提示文案 */
-  message?: string;
-  /** 外部（form 提交时）传入的错误信息 */
-  error?: string;
-  /** 是否禁用（整组件不可交互，区别于 disableBeforeNow/disableAfterNow 的部分日期禁用） */
-  disabled?: boolean;
-  onchange: (value: number | number[] | null) => void;
-}
-
-type Cell = { ts: number; day: number; inMonth: boolean; disabled: boolean };
-type TimeState = { h: number; m: number; s: number };
-
-const WEEK_LABELS = ['一', '二', '三', '四', '五', '六', '日'];
-
-/** 时间戳/格式化字符串（2026-08-20 18:20:06、2026/05/11 等）→ 毫秒时间戳 */
-function parseDateLike(v: number | string | undefined | null): number | null {
-  if (v === undefined || v === null || v === '') return null;
-  if (typeof v === 'number') return v;
-  const s = String(v).trim();
-  if (/^-?\d+$/.test(s)) return Number(s);
-  const m = s.match(/^(\d{4})[-/](\d{1,2})[-/](\d{1,2})(?:[ T](\d{1,2}):(\d{1,2})(?::(\d{1,2}))?)?/);
-  if (m) {
-    return new Date(
-      Number(m[1]), Number(m[2]) - 1, Number(m[3]),
-      Number(m[4] ?? 0), Number(m[5] ?? 0), Number(m[6] ?? 0)
-    ).getTime();
-  }
-  const t = Date.parse(s);
-  return isNaN(t) ? null : t;
-}
-
-function pad(n: number): string {
-  return String(n).padStart(2, '0');
-}
-
-function startOfDay(ts: number): number {
-  const d = new Date(ts);
-  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
-}
-
-export const DatePicker: React.FC<DatePickerProps> = ({
-  label = '',
-  picker = 'date',
-  range = false,
-  default: initial,
-  format,
-  placeholder = '',
-  disableBeforeNow = false,
-  disableAfterNow = false,
-  hint = '',
-  required = false,
-  message = '',
-  error = '',
-  disabled = false,
-  onchange
-}) => {
-  const showTime = picker === 'datetime';
-  // 实际生效的格式：默认值按模式推导——datetime 为 YYYY-MM-DD HH:mm:ss，date 为 YYYY-MM-DD
-  const effFormat = format ?? (showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD');
-
-  // ---------- 状态 ----------
-  const [selected, setSelected] = useState<number | null>(() => {
-    if (initial === undefined || initial === null || range) return null;
-    return parseDateLike(Array.isArray(initial) ? initial[0] : initial);
-  });
-  const [rangeStart, setRangeStart] = useState<number | null>(() => {
-    if (initial === undefined || initial === null || !range) return null;
-    if (Array.isArray(initial)) return parseDateLike(initial[0]);
-    return parseDateLike(initial);
-  });
-  const [rangeEnd, setRangeEnd] = useState<number | null>(() => {
-    if (range && Array.isArray(initial) && initial.length >= 2) return parseDateLike(initial[1]);
-    return null;
-  });
-
-  const [open, setOpen] = useState(false);
-  const [viewYear, setViewYear] = useState(() => {
-    const ref = range ? (rangeStart ?? rangeEnd) : selected;
-    return ref !== null ? new Date(ref).getFullYear() : new Date().getFullYear();
-  });
-  const [viewMonth, setViewMonth] = useState(() => {
-    const ref = range ? (rangeStart ?? rangeEnd) : selected;
-    return ref !== null ? new Date(ref).getMonth() : new Date().getMonth();
-  });
-  // datetime 模式下正在编辑的时间（单选一组；范围选择开始/结束各一组）
-  const [tSingle, setTSingle] = useState<TimeState>({ h: 0, m: 0, s: 0 });
-  const [tStart, setTStart] = useState<TimeState>({ h: 0, m: 0, s: 0 });
-  const [tEnd, setTEnd] = useState<TimeState>({ h: 0, m: 0, s: 0 });
-  // range 模式：第二次点击为结束日期；hover 预览
-  const [pickingEnd, setPickingEnd] = useState(false);
-  const [hoverTs, setHoverTs] = useState<number | null>(null);
-
-  const rootRef = useRef<HTMLDivElement>(null);
-
-  // 外部点击关闭面板
-  useEffect(() => {
-    function onDocClick(e: MouseEvent) {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
-    }
-    document.addEventListener('mousedown', onDocClick);
-    return () => document.removeEventListener('mousedown', onDocClick);
-  }, []);
-
-  // 打开面板时同步视图到已有值
-  function syncView() {
-    const ref = range ? (rangeStart ?? rangeEnd) : selected;
-    const d = ref !== null ? new Date(ref) : new Date();
-    setViewYear(d.getFullYear());
-    setViewMonth(d.getMonth());
-    if (range) {
-      if (rangeStart !== null) setTStart(fromDate(rangeStart));
-      if (rangeEnd !== null) setTEnd(fromDate(rangeEnd));
-    } else if (selected !== null) {
-      setTSingle(fromDate(selected));
-    }
-  }
-
-  function fromDate(ts: number): TimeState {
-    const d = new Date(ts);
-    return { h: d.getHours(), m: d.getMinutes(), s: d.getSeconds() };
-  }
-
-  function toggleOpen() {
-    if (disabled) return;
-    setOpen(prev => {
-      const next = !prev;
-      if (next) { setPickingEnd(false); syncView(); }
-      return next;
-    });
-  }
-
-  // ---------- 日历格子 ----------
-  function makeCells(year: number, month: number): Cell[] {
-    const first = new Date(year, month, 1);
-    // 周一为一周起点
-    const startOffset = (first.getDay() + 6) % 7;
-    const gridStart = new Date(year, month, 1 - startOffset);
-    const list: Cell[] = [];
-    const now = new Date();
-    const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
-    for (let i = 0; i < 42; i++) {
-      const d = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i);
-      const ts = d.getTime();
-      let disabled = false;
-      if (disableBeforeNow && ts < todayStart) disabled = true;
-      if (disableAfterNow && ts > todayStart) disabled = true;
-      list.push({ ts, day: d.getDate(), inMonth: d.getMonth() === month, disabled });
-    }
-    return list;
-  }
-
-  // 单选 / range 左侧面板
-  const leftCells = useMemo(() => makeCells(viewYear, viewMonth), [viewYear, viewMonth, disableBeforeNow, disableAfterNow]);
-  const leftTitle = `${viewYear}年 ${viewMonth + 1}月`;
-  // range 右侧面板（右侧月份 = 左侧 + 1）
-  const rightYear = viewMonth === 11 ? viewYear + 1 : viewYear;
-  const rightMonth = viewMonth === 11 ? 0 : viewMonth + 1;
-  const rightCells = useMemo(() => makeCells(rightYear, rightMonth), [rightYear, rightMonth, disableBeforeNow, disableAfterNow]);
-  const rightTitle = `${rightYear}年 ${rightMonth + 1}月`;
-
-  function prevMonth() {
-    if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1); } else setViewMonth(m => m - 1);
-  }
-  function nextMonth() {
-    if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1); } else setViewMonth(m => m + 1);
-  }
-
-  // ---------- 选中逻辑 ----------
-  function applyTime(dayTs: number, t: TimeState): number {
-    if (!showTime) return new Date(dayTs).setHours(0, 0, 0, 0);
-    return new Date(dayTs).setHours(t.h, t.m, t.s, 0);
-  }
-
-  function emit(nextSelected: number | null, nextStart: number | null, nextEnd: number | null) {
-    if (range) {
-      onchange(nextStart !== null && nextEnd !== null ? [nextStart, nextEnd] : []);
-    } else {
-      onchange(nextSelected);
-    }
-  }
-
-  function pickCell(cell: Cell) {
-    if (cell.disabled) return;
-    if (range) {
-      if (!pickingEnd || rangeStart === null || cell.ts < startOfDay(rangeStart)) {
-        // 第一次点击，或点击了早于当前开始日期的格子 → （重新）选择开始
-        const s = applyTime(cell.ts, tStart);
-        setRangeStart(s);
-        setRangeEnd(null);
-        setPickingEnd(true);
-      } else {
-        const e = applyTime(cell.ts, tEnd);
-        setRangeEnd(e);
-        setPickingEnd(false);
-        // datetime 模式保持面板打开，等时间输入 + 确定；仅日期模式直接完成
-        if (!showTime) setOpen(false);
-        emit(selected, rangeStart, e);
-      }
-    } else {
-      const v = applyTime(cell.ts, tSingle);
-      setSelected(v);
-      if (!showTime) setOpen(false);
-      emit(v, rangeStart, rangeEnd);
-    }
-  }
-
-  function setTime(side: 'single' | 'start' | 'end', part: 'h' | 'm' | 's', ev: React.ChangeEvent<HTMLInputElement>) {
-    const n = parseInt(ev.target.value, 10);
-    if (isNaN(n)) return;
-    const max = part === 'h' ? 23 : 59;
-    const v = Math.min(max, Math.max(0, n));
-    const t = side === 'single' ? tSingle : side === 'start' ? tStart : tEnd;
-    const next = { ...t, [part]: v } as TimeState;
-    if (side === 'single') setTSingle(next);
-    if (side === 'start') setTStart(next);
-    if (side === 'end') setTEnd(next);
-    // 已有选中值时实时更新
-    if (side === 'single' && selected !== null) { const s = applyTime(selected, next); setSelected(s); emit(s, rangeStart, rangeEnd); }
-    if (side === 'start' && rangeStart !== null) { const s = applyTime(rangeStart, next); setRangeStart(s); if (rangeEnd !== null) emit(selected, s, rangeEnd); }
-    if (side === 'end' && rangeEnd !== null) { const e = applyTime(rangeEnd, next); setRangeEnd(e); if (rangeStart !== null) emit(selected, rangeStart, e); }
-  }
-
-  function clearValue() {
-    setSelected(null);
-    setRangeStart(null);
-    setRangeEnd(null);
-    setPickingEnd(false);
-    onchange(range ? [] : null);
-  }
-
-  // datetime 模式：应用时间输入并确认
-  function confirmTime() {
-    if (range) {
-      const s = rangeStart !== null ? applyTime(rangeStart, tStart) : null;
-      const e = rangeEnd !== null ? applyTime(rangeEnd, tEnd) : null;
-      if (s !== null) setRangeStart(s);
-      if (e !== null) setRangeEnd(e);
-      emit(selected, s, e);
-    } else if (selected !== null) {
-      const v = applyTime(selected, tSingle);
-      setSelected(v);
-      emit(v, rangeStart, rangeEnd);
-    }
-    setOpen(false);
-  }
-
-  function formatDate(ts: number): string {
-    const d = new Date(ts);
-    return effFormat
-      .replace(/YYYY/g, String(d.getFullYear()))
-      .replace(/MM/g, pad(d.getMonth() + 1))
-      .replace(/DD/g, pad(d.getDate()))
-      .replace(/HH/g, pad(d.getHours()))
-      .replace(/mm/g, pad(d.getMinutes()))
-      .replace(/ss/g, pad(d.getSeconds()));
-  }
-
-  // 展示文案
-  const startText = rangeStart !== null ? formatDate(rangeStart) : '';
-  const endText = rangeEnd !== null ? formatDate(rangeEnd) : '';
-
-  // 格子状态 class
-  function cellCls(c: Cell): string {
-    const day = startOfDay(c.ts);
-    let cls = 'dp-cell';
-    if (!c.inMonth) cls += ' dp-cell-out';
-    if (c.disabled) {
-      cls += ' dp-cell-disabled';
-      return cls;
-    }
-    const todayTs = startOfDay(Date.now());
-    if (day === todayTs) cls += ' dp-cell-today';
-    if (range && rangeStart !== null) {
-      const s = startOfDay(rangeStart);
-      // 已有结束日期用真实值；正在选结束时用 hover 位置预览（支持反向 hover）
-      const e = rangeEnd !== null ? startOfDay(rangeEnd) : (pickingEnd && hoverTs !== null ? startOfDay(hoverTs) : null);
-      if (e !== null) {
-        const lo = Math.min(s, e);
-        const hi = Math.max(s, e);
-        if (day === lo) cls += ' dp-cell-range-start';
-        if (day === hi) cls += ' dp-cell-range-end';
-        if (day > lo && day < hi) cls += ' dp-cell-in-range';
-      } else if (day === s) {
-        cls += ' dp-cell-range-start';
-      }
-    } else if (selected !== null && day === startOfDay(selected)) {
-      cls += ' dp-cell-selected';
-    }
-    return cls;
-  }
-
-  // 单个日历面板
-  const calPanel = (cellsList: Cell[], title: string, nav: 'prev' | 'next' | 'both') => (
-    <div className="dp-calendar">
-      <div className="dp-header">
-        {(nav === 'prev' || nav === 'both')
-          ? <button type="button" className="dp-nav" onClick={prevMonth} aria-label="上个月">‹</button>
-          : <span className="dp-nav-spacer"></span>}
-        <span className="dp-title">{title}</span>
-        {(nav === 'next' || nav === 'both')
-          ? <button type="button" className="dp-nav" onClick={nextMonth} aria-label="下个月">›</button>
-          : <span className="dp-nav-spacer"></span>}
-      </div>
-      <div className="dp-week-header">
-        {WEEK_LABELS.map(w => <span className="dp-week" key={w}>{w}</span>)}
-      </div>
-      <div className="dp-grid" onMouseLeave={() => setHoverTs(null)}>
-        {cellsList.map(c => (
-          <button
-            type="button"
-            key={c.ts}
-            className={cellCls(c)}
-            onClick={() => pickCell(c)}
-            onMouseOver={() => setHoverTs(c.ts)}
-            disabled={c.disabled}
-          >{c.day}</button>
-        ))}
-      </div>
-    </div>
-  );
-
-  const timeInput = (side: 'single' | 'start' | 'end', label: string, t: TimeState) => (
-    <>
-      {label && <span className="dp-time-label">{label}</span>}
-      <input className="dp-time-input" type="number" min={0} max={23} value={t.h} onChange={(e) => setTime(side, 'h', e)} aria-label={`${label} 时`} />
-      <span className="dp-time-sep">:</span>
-      <input className="dp-time-input" type="number" min={0} max={59} value={t.m} onChange={(e) => setTime(side, 'm', e)} aria-label={`${label} 分`} />
-      <span className="dp-time-sep">:</span>
-      <input className="dp-time-input" type="number" min={0} max={59} value={t.s} onChange={(e) => setTime(side, 's', e)} aria-label={`${label} 秒`} />
-    </>
-  );
-
-  return (
-    <div className="selector widget-date-picker" ref={rootRef}>
-      {(label || hint || required) && (
-        <div className="widget-label-row">
-          {required && <span className="widget-required-mark" aria-hidden="true">*</span>}
-          {label && <label>{label}</label>}
-          {hint && <span className="widget-hint" data-hint={hint}>ⓘ</span>}
-        </div>
-      )}
-      <div className="widget-field-content">
-        <button
-          type="button"
-          className={`dp-input${error ? ' widget-input-error' : ''}`}
-          onClick={toggleOpen}
-          aria-expanded={open}
-          disabled={disabled}
-        >
-          <span className="dp-input-icon" aria-hidden="true">📅</span>
-          {range ? (
-            <>
-              <span className={`dp-input-text dp-seg${startText ? '' : ' dp-placeholder'}`}>
-                {startText || placeholder || (showTime ? '开始时间' : '开始日期')}
-              </span>
-              <span className="dp-sep" aria-hidden="true">→</span>
-              <span className={`dp-input-text dp-seg${endText ? '' : ' dp-placeholder'}`}>
-                {endText || (showTime ? '结束时间' : '结束日期')}
-              </span>
-            </>
-          ) : (
-            <span className={`dp-input-text${selected !== null ? '' : ' dp-placeholder'}`}>
-              {selected !== null ? formatDate(selected) : placeholder || '请选择日期'}
-            </span>
-          )}
-          {!disabled && (range ? (startText || endText) : selected !== null) && (
-            <span
-              className="dp-clear"
-              role="button"
-              tabIndex={-1}
-              aria-label="清空"
-              onClick={(e) => { e.stopPropagation(); clearValue(); setOpen(false); }}
-            >×</span>
-          )}
-        </button>
-        {error && <div className="widget-error-text" role="alert">{error}</div>}
-
-        {open && (
-          <div className={`dp-panel${range ? ' dp-range' : ''}`}>
-            {range ? (
-              <div className="dp-panels">
-                {calPanel(leftCells, leftTitle, 'prev')}
-                {calPanel(rightCells, rightTitle, 'next')}
-              </div>
-            ) : (
-              calPanel(leftCells, leftTitle, 'both')
-            )}
-
-            {showTime && (
-              <div className="dp-time">
-                {range ? (
-                  <>
-                    <div className="dp-time-groups">
-                      <div className="dp-time-group">{timeInput('start', '开始', tStart)}</div>
-                      <span className="dp-time-arrow" aria-hidden="true">~</span>
-                      <div className="dp-time-group">{timeInput('end', '结束', tEnd)}</div>
-                    </div>
-                    <div className="dp-footer">
-                      <button type="button" className="dp-ok" onClick={confirmTime} disabled={rangeStart === null}>确定</button>
-                    </div>
-                  </>
-                ) : (
-                  <div className="dp-time-group">
-                    {timeInput('single', '', tSingle)}
-                    <button type="button" className="dp-ok" onClick={confirmTime} disabled={selected === null}>确定</button>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+export interface DatePickerProps {
+  label?: string;
+  /** 选择模式：date 仅日期（默认）/ datetime 日期+时间 */
+  picker?: 'date' | 'datetime';
+  /** 范围选择（antd RangePicker 效果：双月历面板） */
+  range?: boolean;
+  /** 默认值：时间戳（毫秒）或格式化时间字符串；range 模式为 [start, end] */
+  default?: number | string | (number | string)[];
+  /** 显示格式：默认按模式推导——date 为 YYYY-MM-DD，datetime 为 YYYY-MM-DD HH:mm:ss */
+  format?: string;
+  placeholder?: string;
+  /** 禁用当前日期之前的日期 */
+  disableBeforeNow?: boolean;
+  /** 禁用当前日期之后的日期 */
+  disableAfterNow?: boolean;
+  hint?: string;
+  required?: boolean;
+  /** 校验失败提示文案 */
+  message?: string;
+  /** 外部（form 提交时）传入的错误信息 */
+  error?: string;
+  /** 是否禁用（整组件不可交互，区别于 disableBeforeNow/disableAfterNow 的部分日期禁用） */
+  disabled?: boolean;
+  onchange: (value: number | number[] | null) => void;
+}
+
+type Cell = { ts: number; day: number; inMonth: boolean; disabled: boolean };
+type TimeState = { h: number; m: number; s: number };
+
+const WEEK_LABELS = ['一', '二', '三', '四', '五', '六', '日'];
+
+/** 时间戳/格式化字符串（2026-08-20 18:20:06、2026/05/11 等）→ 毫秒时间戳 */
+function parseDateLike(v: number | string | undefined | null): number | null {
+  if (v === undefined || v === null || v === '') return null;
+  if (typeof v === 'number') return v;
+  const s = String(v).trim();
+  if (/^-?\d+$/.test(s)) return Number(s);
+  const m = s.match(/^(\d{4})[-/](\d{1,2})[-/](\d{1,2})(?:[ T](\d{1,2}):(\d{1,2})(?::(\d{1,2}))?)?/);
+  if (m) {
+    return new Date(
+      Number(m[1]), Number(m[2]) - 1, Number(m[3]),
+      Number(m[4] ?? 0), Number(m[5] ?? 0), Number(m[6] ?? 0)
+    ).getTime();
+  }
+  const t = Date.parse(s);
+  return isNaN(t) ? null : t;
+}
+
+function pad(n: number): string {
+  return String(n).padStart(2, '0');
+}
+
+function startOfDay(ts: number): number {
+  const d = new Date(ts);
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+}
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  label = '',
+  picker = 'date',
+  range = false,
+  default: initial,
+  format,
+  placeholder = '',
+  disableBeforeNow = false,
+  disableAfterNow = false,
+  hint = '',
+  required = false,
+  message = '',
+  error = '',
+  disabled = false,
+  onchange
+}) => {
+  const showTime = picker === 'datetime';
+  // 实际生效的格式：默认值按模式推导——datetime 为 YYYY-MM-DD HH:mm:ss，date 为 YYYY-MM-DD
+  const effFormat = format ?? (showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD');
+
+  // ---------- 状态 ----------
+  const [selected, setSelected] = useState<number | null>(() => {
+    if (initial === undefined || initial === null || range) return null;
+    return parseDateLike(Array.isArray(initial) ? initial[0] : initial);
+  });
+  const [rangeStart, setRangeStart] = useState<number | null>(() => {
+    if (initial === undefined || initial === null || !range) return null;
+    if (Array.isArray(initial)) return parseDateLike(initial[0]);
+    return parseDateLike(initial);
+  });
+  const [rangeEnd, setRangeEnd] = useState<number | null>(() => {
+    if (range && Array.isArray(initial) && initial.length >= 2) return parseDateLike(initial[1]);
+    return null;
+  });
+
+  const [open, setOpen] = useState(false);
+  const [viewYear, setViewYear] = useState(() => {
+    const ref = range ? (rangeStart ?? rangeEnd) : selected;
+    return ref !== null ? new Date(ref).getFullYear() : new Date().getFullYear();
+  });
+  const [viewMonth, setViewMonth] = useState(() => {
+    const ref = range ? (rangeStart ?? rangeEnd) : selected;
+    return ref !== null ? new Date(ref).getMonth() : new Date().getMonth();
+  });
+  // datetime 模式下正在编辑的时间（单选一组；范围选择开始/结束各一组）
+  const [tSingle, setTSingle] = useState<TimeState>({ h: 0, m: 0, s: 0 });
+  const [tStart, setTStart] = useState<TimeState>({ h: 0, m: 0, s: 0 });
+  const [tEnd, setTEnd] = useState<TimeState>({ h: 0, m: 0, s: 0 });
+  // range 模式：第二次点击为结束日期；hover 预览
+  const [pickingEnd, setPickingEnd] = useState(false);
+  const [hoverTs, setHoverTs] = useState<number | null>(null);
+
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  // 外部点击关闭面板
+  useEffect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  }, []);
+
+  // 打开面板时同步视图到已有值
+  function syncView() {
+    const ref = range ? (rangeStart ?? rangeEnd) : selected;
+    const d = ref !== null ? new Date(ref) : new Date();
+    setViewYear(d.getFullYear());
+    setViewMonth(d.getMonth());
+    if (range) {
+      if (rangeStart !== null) setTStart(fromDate(rangeStart));
+      if (rangeEnd !== null) setTEnd(fromDate(rangeEnd));
+    } else if (selected !== null) {
+      setTSingle(fromDate(selected));
+    }
+  }
+
+  function fromDate(ts: number): TimeState {
+    const d = new Date(ts);
+    return { h: d.getHours(), m: d.getMinutes(), s: d.getSeconds() };
+  }
+
+  function toggleOpen() {
+    if (disabled) return;
+    setOpen(prev => {
+      const next = !prev;
+      if (next) { setPickingEnd(false); syncView(); }
+      return next;
+    });
+  }
+
+  // ---------- 日历格子 ----------
+  function makeCells(year: number, month: number): Cell[] {
+    const first = new Date(year, month, 1);
+    // 周一为一周起点
+    const startOffset = (first.getDay() + 6) % 7;
+    const gridStart = new Date(year, month, 1 - startOffset);
+    const list: Cell[] = [];
+    const now = new Date();
+    const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate()).getTime();
+    for (let i = 0; i < 42; i++) {
+      const d = new Date(gridStart.getFullYear(), gridStart.getMonth(), gridStart.getDate() + i);
+      const ts = d.getTime();
+      let disabled = false;
+      if (disableBeforeNow && ts < todayStart) disabled = true;
+      if (disableAfterNow && ts > todayStart) disabled = true;
+      list.push({ ts, day: d.getDate(), inMonth: d.getMonth() === month, disabled });
+    }
+    return list;
+  }
+
+  // 单选 / range 左侧面板
+  const leftCells = useMemo(() => makeCells(viewYear, viewMonth), [viewYear, viewMonth, disableBeforeNow, disableAfterNow]);
+  const leftTitle = `${viewMonth + 1}月`;
+  const leftYearTitle = `${viewYear}年`;
+  // range 右侧面板（右侧月份 = 左侧 + 1）
+  const rightYear = viewMonth === 11 ? viewYear + 1 : viewYear;
+  const rightMonth = viewMonth === 11 ? 0 : viewMonth + 1;
+  const rightCells = useMemo(() => makeCells(rightYear, rightMonth), [rightYear, rightMonth, disableBeforeNow, disableAfterNow]);
+  const rightTitle = `${rightMonth + 1}月`;
+  const rightYearTitle = `${rightYear}年`;
+
+  function prevMonth() {
+    if (viewMonth === 0) { setViewMonth(11); setViewYear(y => y - 1); } else setViewMonth(m => m - 1);
+  }
+  function nextMonth() {
+    if (viewMonth === 11) { setViewMonth(0); setViewYear(y => y + 1); } else setViewMonth(m => m + 1);
+  }
+  function prevYear() { setViewYear(y => y - 1); }
+  function nextYear() { setViewYear(y => y + 1); }
+
+  // ---------- 选中逻辑 ----------
+  function applyTime(dayTs: number, t: TimeState): number {
+    if (!showTime) return new Date(dayTs).setHours(0, 0, 0, 0);
+    return new Date(dayTs).setHours(t.h, t.m, t.s, 0);
+  }
+
+  function emit(nextSelected: number | null, nextStart: number | null, nextEnd: number | null) {
+    if (range) {
+      onchange(nextStart !== null && nextEnd !== null ? [nextStart, nextEnd] : []);
+    } else {
+      onchange(nextSelected);
+    }
+  }
+
+  function pickCell(cell: Cell) {
+    if (cell.disabled) return;
+    if (range) {
+      if (!pickingEnd || rangeStart === null || cell.ts < startOfDay(rangeStart)) {
+        // 第一次点击，或点击了早于当前开始日期的格子 → （重新）选择开始
+        const s = applyTime(cell.ts, tStart);
+        setRangeStart(s);
+        setRangeEnd(null);
+        setPickingEnd(true);
+      } else {
+        const e = applyTime(cell.ts, tEnd);
+        setRangeEnd(e);
+        setPickingEnd(false);
+        // datetime 模式保持面板打开，等时间输入 + 确定；仅日期模式直接完成
+        if (!showTime) setOpen(false);
+        emit(selected, rangeStart, e);
+      }
+    } else {
+      const v = applyTime(cell.ts, tSingle);
+      setSelected(v);
+      if (!showTime) setOpen(false);
+      emit(v, rangeStart, rangeEnd);
+    }
+  }
+
+  function setTime(side: 'single' | 'start' | 'end', part: 'h' | 'm' | 's', ev: React.ChangeEvent<HTMLInputElement>) {
+    const n = parseInt(ev.target.value, 10);
+    if (isNaN(n)) return;
+    const max = part === 'h' ? 23 : 59;
+    const v = Math.min(max, Math.max(0, n));
+    const t = side === 'single' ? tSingle : side === 'start' ? tStart : tEnd;
+    const next = { ...t, [part]: v } as TimeState;
+    if (side === 'single') setTSingle(next);
+    if (side === 'start') setTStart(next);
+    if (side === 'end') setTEnd(next);
+    // 已有选中值时实时更新
+    if (side === 'single' && selected !== null) { const s = applyTime(selected, next); setSelected(s); emit(s, rangeStart, rangeEnd); }
+    if (side === 'start' && rangeStart !== null) { const s = applyTime(rangeStart, next); setRangeStart(s); if (rangeEnd !== null) emit(selected, s, rangeEnd); }
+    if (side === 'end' && rangeEnd !== null) { const e = applyTime(rangeEnd, next); setRangeEnd(e); if (rangeStart !== null) emit(selected, rangeStart, e); }
+  }
+
+  function clearValue() {
+    setSelected(null);
+    setRangeStart(null);
+    setRangeEnd(null);
+    setPickingEnd(false);
+    onchange(range ? [] : null);
+  }
+
+  // datetime 模式：应用时间输入并确认
+  function confirmTime() {
+    if (range) {
+      const s = rangeStart !== null ? applyTime(rangeStart, tStart) : null;
+      const e = rangeEnd !== null ? applyTime(rangeEnd, tEnd) : null;
+      if (s !== null) setRangeStart(s);
+      if (e !== null) setRangeEnd(e);
+      emit(selected, s, e);
+    } else if (selected !== null) {
+      const v = applyTime(selected, tSingle);
+      setSelected(v);
+      emit(v, rangeStart, rangeEnd);
+    }
+    setOpen(false);
+  }
+
+  function formatDate(ts: number): string {
+    const d = new Date(ts);
+    return effFormat
+      .replace(/YYYY/g, String(d.getFullYear()))
+      .replace(/MM/g, pad(d.getMonth() + 1))
+      .replace(/DD/g, pad(d.getDate()))
+      .replace(/HH/g, pad(d.getHours()))
+      .replace(/mm/g, pad(d.getMinutes()))
+      .replace(/ss/g, pad(d.getSeconds()));
+  }
+
+  // 展示文案
+  const startText = rangeStart !== null ? formatDate(rangeStart) : '';
+  const endText = rangeEnd !== null ? formatDate(rangeEnd) : '';
+
+  // 格子状态 class
+  function cellCls(c: Cell): string {
+    const day = startOfDay(c.ts);
+    let cls = 'dp-cell';
+    if (!c.inMonth) cls += ' dp-cell-out';
+    if (c.disabled) {
+      cls += ' dp-cell-disabled';
+      return cls;
+    }
+    const todayTs = startOfDay(Date.now());
+    if (day === todayTs) cls += ' dp-cell-today';
+    if (range && rangeStart !== null) {
+      const s = startOfDay(rangeStart);
+      // 已有结束日期用真实值；正在选结束时用 hover 位置预览（支持反向 hover）
+      const e = rangeEnd !== null ? startOfDay(rangeEnd) : (pickingEnd && hoverTs !== null ? startOfDay(hoverTs) : null);
+      if (e !== null) {
+        const lo = Math.min(s, e);
+        const hi = Math.max(s, e);
+        if (day === lo) cls += ' dp-cell-range-start';
+        if (day === hi) cls += ' dp-cell-range-end';
+        if (day > lo && day < hi) cls += ' dp-cell-in-range';
+      } else if (day === s) {
+        cls += ' dp-cell-range-start';
+      }
+    } else if (selected !== null && day === startOfDay(selected)) {
+      cls += ' dp-cell-selected';
+    }
+    return cls;
+  }
+
+  // 单个日历面板
+  const calPanel = (cellsList: Cell[], title: string, yearTitle: string, nav: 'prev' | 'next' | 'both') => (
+    <div className="dp-calendar">
+      <div className="dp-header">
+        <div className="dp-header-nav">
+          {(nav === 'prev' || nav === 'both') && (
+            <>
+              <button type="button" className="dp-nav" onClick={prevYear} aria-label="上一年">«</button>
+              <button type="button" className="dp-nav" onClick={prevMonth} aria-label="上个月">‹</button>
+            </>
+          )}
+        </div>
+        <span className="dp-title">
+          <span className="dp-title-year">{yearTitle}</span>
+          {title}
+        </span>
+        <div className="dp-header-nav">
+          {(nav === 'next' || nav === 'both') && (
+            <>
+              <button type="button" className="dp-nav" onClick={nextMonth} aria-label="下个月">›</button>
+              <button type="button" className="dp-nav" onClick={nextYear} aria-label="下一年">»</button>
+            </>
+          )}
+        </div>
+      </div>
+      <div className="dp-week-header">
+        {WEEK_LABELS.map(w => <span className="dp-week" key={w}>{w}</span>)}
+      </div>
+      <div className="dp-grid" onMouseLeave={() => setHoverTs(null)}>
+        {cellsList.map(c => (
+          <button
+            type="button"
+            key={c.ts}
+            className={cellCls(c)}
+            onClick={() => pickCell(c)}
+            onMouseOver={() => setHoverTs(c.ts)}
+            disabled={c.disabled}
+          >{c.day}</button>
+        ))}
+      </div>
+    </div>
+  );
+
+  const timeInput = (side: 'single' | 'start' | 'end', label: string, t: TimeState) => (
+    <>
+      {label && <span className="dp-time-label">{label}</span>}
+      <input className="dp-time-input" type="number" min={0} max={23} value={t.h} onChange={(e) => setTime(side, 'h', e)} aria-label={`${label} 时`} />
+      <span className="dp-time-sep">:</span>
+      <input className="dp-time-input" type="number" min={0} max={59} value={t.m} onChange={(e) => setTime(side, 'm', e)} aria-label={`${label} 分`} />
+      <span className="dp-time-sep">:</span>
+      <input className="dp-time-input" type="number" min={0} max={59} value={t.s} onChange={(e) => setTime(side, 's', e)} aria-label={`${label} 秒`} />
+    </>
+  );
+
+  return (
+    <div className="selector widget-date-picker" ref={rootRef}>
+      {(label || hint || required) && (
+        <div className="widget-label-row">
+          {required && <span className="widget-required-mark" aria-hidden="true">*</span>}
+          {label && <label>{label}</label>}
+          {hint && <span className="widget-hint" data-hint={hint}>ⓘ</span>}
+        </div>
+      )}
+      <div className="widget-field-content">
+        <button
+          type="button"
+          className={`dp-input${error ? ' widget-input-error' : ''}`}
+          onClick={toggleOpen}
+          aria-expanded={open}
+          disabled={disabled}
+        >
+          <span className="dp-input-icon" aria-hidden="true">📅</span>
+          {range ? (
+            <>
+              <span className={`dp-input-text dp-seg${startText ? '' : ' dp-placeholder'}`}>
+                {startText || placeholder || (showTime ? '开始时间' : '开始日期')}
+              </span>
+              <span className="dp-sep" aria-hidden="true">→</span>
+              <span className={`dp-input-text dp-seg${endText ? '' : ' dp-placeholder'}`}>
+                {endText || (showTime ? '结束时间' : '结束日期')}
+              </span>
+            </>
+          ) : (
+            <span className={`dp-input-text${selected !== null ? '' : ' dp-placeholder'}`}>
+              {selected !== null ? formatDate(selected) : placeholder || '请选择日期'}
+            </span>
+          )}
+          {!disabled && (range ? (startText || endText) : selected !== null) && (
+            <span
+              className="dp-clear"
+              role="button"
+              tabIndex={-1}
+              aria-label="清空"
+              onClick={(e) => { e.stopPropagation(); clearValue(); setOpen(false); }}
+            >×</span>
+          )}
+        </button>
+        {error && <div className="widget-error-text" role="alert">{error}</div>}
+
+        {open && (
+          <div className={`dp-panel${range ? ' dp-range' : ''}`}>
+            {range ? (
+              <div className="dp-panels">
+                {calPanel(leftCells, leftTitle, leftYearTitle, 'prev')}
+                {calPanel(rightCells, rightTitle, rightYearTitle, 'next')}
+              </div>
+            ) : (
+              calPanel(leftCells, leftTitle, leftYearTitle, 'both')
+            )}
+
+            {showTime && (
+              <div className="dp-time">
+                {range ? (
+                  <>
+                    <div className="dp-time-groups">
+                      <div className="dp-time-group">{timeInput('start', '开始', tStart)}</div>
+                      <span className="dp-time-arrow" aria-hidden="true">~</span>
+                      <div className="dp-time-group">{timeInput('end', '结束', tEnd)}</div>
+                    </div>
+                    <div className="dp-footer">
+                      <button type="button" className="dp-ok" onClick={confirmTime} disabled={rangeStart === null}>确定</button>
+                    </div>
+                  </>
+                ) : (
+                  <div className="dp-time-group">
+                    {timeInput('single', '', tSingle)}
+                    <button type="button" className="dp-ok" onClick={confirmTime} disabled={selected === null}>确定</button>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};