@c2-markdown-ui/svelte 0.0.0-stage → 0.4.3

package/src/lib/widgets/DatePicker.svelte

@@ -0,0 +1,609 @@
+<script lang="ts">
+  interface Props {
+    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;
+  }
+  let {
+    label = '',
+    picker = 'date',
+    range = false,
+    default: initial,
+    format,
+    placeholder = '',
+    disableBeforeNow = false,
+    disableAfterNow = false,
+    hint = '',
+    required = false,
+    message = '',
+    error = '',
+    disabled = false,
+    onchange
+  }: Props = $props();
+
+  const showTime = picker === 'datetime';
+  // 实际生效的格式：默认值按模式推导——datetime 为 YYYY-MM-DD HH:mm:ss，date 为 YYYY-MM-DD
+  const effFormat = $derived(format ?? (showTime ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD'));
+
+  // ---------- 时间解析/格式化工具 ----------
+  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);
+    // 支持 2026-08-20 18:20:06 / 2026/05/11 18:20:06 / 2026-08-20 / 2026/05/11
+    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 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()));
+  }
+
+  type TimeState = { h: number; m: number; s: number };
+
+  // ---------- 状态 ----------
+  // 单选：选中的时间戳；范围：[start, end]
+  let selected = $state<number | null>(null);
+  let rangeStart = $state<number | null>(null);
+  let rangeEnd = $state<number | null>(null);
+
+  // 初始化 default
+  if (initial !== undefined && initial !== null) {
+    if (range && Array.isArray(initial) && initial.length >= 2) {
+      rangeStart = parseDateLike(initial[0]);
+      rangeEnd = parseDateLike(initial[1]);
+    } else if (range && !Array.isArray(initial)) {
+      rangeStart = parseDateLike(initial as any);
+    } else if (!range) {
+      selected = parseDateLike(Array.isArray(initial) ? initial[0] : (initial as any));
+    }
+  }
+
+  // 面板开关与当前展示月份（range 模式为左侧面板的月份，右侧自动 +1）
+  let open = $state(false);
+  let viewYear = $state(new Date().getFullYear());
+  let viewMonth = $state(new Date().getMonth()); // 0-11
+  // datetime 模式下正在编辑的时间（单选一组；范围选择开始/结束各一组）
+  let tSingle = $state<TimeState>({ h: 0, m: 0, s: 0 });
+  let tStart = $state<TimeState>({ h: 0, m: 0, s: 0 });
+  let tEnd = $state<TimeState>({ h: 0, m: 0, s: 0 });
+  // range 模式：第二次点击为结束日期；hover 预览
+  let pickingEnd = $state(false);
+  let hoverTs = $state<number | null>(null);
+
+  let rootEl: HTMLElement | undefined = $state();
+
+  $effect(() => {
+    function onDocClick(e: MouseEvent) {
+      if (rootEl && !rootEl.contains(e.target as Node)) open = false;
+    }
+    document.addEventListener('mousedown', onDocClick);
+    return () => document.removeEventListener('mousedown', onDocClick);
+  });
+
+  function assignTime(t: TimeState, ts: number) {
+    const d = new Date(ts);
+    t.h = d.getHours();
+    t.m = d.getMinutes();
+    t.s = d.getSeconds();
+  }
+
+  // 打开面板时同步视图到已有值
+  function syncView() {
+    const ref = range ? (rangeStart ?? rangeEnd) : selected;
+    const d = ref !== null ? new Date(ref) : new Date();
+    viewYear = d.getFullYear();
+    viewMonth = d.getMonth();
+    if (range) {
+      if (rangeStart !== null) assignTime(tStart, rangeStart);
+      if (rangeEnd !== null) assignTime(tEnd, rangeEnd);
+    } else if (selected !== null) {
+      assignTime(tSingle, selected);
+    }
+  }
+
+  function toggleOpen() {
+    if (disabled) return;
+    open = !open;
+    if (open) { pickingEnd = false; syncView(); }
+  }
+
+  // ---------- 日历格子 ----------
+  const WEEK_LABELS = ['一', '二', '三', '四', '五', '六', '日'];
+
+  type Cell = { ts: number; day: number; inMonth: boolean; disabled: boolean };
+
+  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;
+  }
+
+  function startOfDay(ts: number): number {
+    const d = new Date(ts);
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+  }
+
+  // 单选 / range 左侧面板
+  const leftCells = $derived(makeCells(viewYear, viewMonth));
+  const leftTitle = $derived(`${viewMonth + 1}月`);
+  const leftYearTitle = $derived(`${viewYear}年`);
+  // range 右侧面板（右侧月份 = 左侧 + 1）
+  const rightYear = $derived(viewMonth === 11 ? viewYear + 1 : viewYear);
+  const rightMonth = $derived(viewMonth === 11 ? 0 : viewMonth + 1);
+  const rightCells = $derived(makeCells(rightYear, rightMonth));
+  const rightTitle = $derived(`${rightMonth + 1}月`);
+  const rightYearTitle = $derived(`${rightYear}年`);
+
+  function prevMonth() {
+    if (viewMonth === 0) { viewMonth = 11; viewYear--; } else viewMonth--;
+  }
+  function nextMonth() {
+    if (viewMonth === 11) { viewMonth = 0; viewYear++; } else viewMonth++;
+  }
+  function prevYear() { viewYear--; }
+  function nextYear() { viewYear++; }
+
+  // ---------- 选中逻辑 ----------
+  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() {
+    if (range) {
+      onchange(rangeStart !== null && rangeEnd !== null ? [rangeStart, rangeEnd] : []);
+    } else {
+      onchange(selected);
+    }
+  }
+
+  function pickCell(cell: Cell) {
+    if (cell.disabled) return;
+    if (range) {
+      if (!pickingEnd || rangeStart === null || cell.ts < startOfDay(rangeStart)) {
+        // 第一次点击，或点击了早于当前开始日期的格子 → （重新）选择开始
+        rangeStart = applyTime(cell.ts, tStart);
+        rangeEnd = null;
+        pickingEnd = true;
+      } else {
+        rangeEnd = applyTime(cell.ts, tEnd);
+        pickingEnd = false;
+        // datetime 模式保持面板打开，等时间输入 + 确定；仅日期模式直接完成
+        if (!showTime) open = false;
+        emit();
+      }
+    } else {
+      selected = applyTime(cell.ts, tSingle);
+      if (!showTime) open = false;
+      emit();
+    }
+  }
+
+  function setTime(side: 'single' | 'start' | 'end', part: 'h' | 'm' | 's', ev: Event) {
+    const input = ev.target as HTMLInputElement;
+    const n = parseInt(input.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;
+    t[part] = v;
+    // 已有选中值时实时更新
+    if (side === 'single' && selected !== null) { selected = applyTime(selected, tSingle); emit(); }
+    if (side === 'start' && rangeStart !== null) { rangeStart = applyTime(rangeStart, tStart); if (rangeEnd !== null) emit(); }
+    if (side === 'end' && rangeEnd !== null) { rangeEnd = applyTime(rangeEnd, tEnd); if (rangeStart !== null) emit(); }
+  }
+
+  function clearValue() {
+    selected = null;
+    rangeStart = null;
+    rangeEnd = null;
+    pickingEnd = false;
+    onchange(range ? [] : null);
+  }
+
+  // datetime 模式：应用时间输入并确认
+  function confirmTime() {
+    if (range) {
+      if (rangeStart !== null) rangeStart = applyTime(rangeStart, tStart);
+      if (rangeEnd !== null) rangeEnd = applyTime(rangeEnd, tEnd);
+      emit();
+    } else if (selected !== null) {
+      selected = applyTime(selected, tSingle);
+      emit();
+    }
+    open = false;
+  }
+
+  // ---------- 展示文案 ----------
+  const startText = $derived(rangeStart !== null ? formatDate(rangeStart) : '');
+  const endText = $derived(rangeEnd !== null ? formatDate(rangeEnd) : '');
+
+  // 必填校验错误文案（外部 form 提交错误优先）
+  const shownError = $derived.by(() => {
+    if (!error) return '';
+    return error;
+  });
+
+  // 格子状态 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;
+  }
+</script>
+
+<div class="selector widget-date-picker" bind:this={rootEl}>
+  {#if label || hint || required}
+    <div class="widget-label-row">
+      {#if required}<span class="widget-required-mark" aria-hidden="true">*</span>{/if}
+      {#if label}<label>{label}</label>{/if}
+      {#if hint}<span class="widget-hint" data-hint={hint}>ⓘ</span>{/if}
+    </div>
+  {/if}
+  <div class="widget-field-content">
+    <button type="button" class="dp-input" class:widget-input-error={!!shownError} onclick={toggleOpen} aria-expanded={open} {disabled}>
+      <span class="dp-input-icon" aria-hidden="true">📅</span>
+      {#if range}
+        <span class="dp-input-text dp-seg" class:dp-placeholder={!startText}>{startText || placeholder || (showTime ? '开始时间' : '开始日期')}</span>
+        <span class="dp-sep" aria-hidden="true">→</span>
+        <span class="dp-input-text dp-seg" class:dp-placeholder={!endText}>{endText || (showTime ? '结束时间' : '结束日期')}</span>
+      {:else}
+        <span class="dp-input-text" class:dp-placeholder={!startText && selected === null}>{selected !== null ? formatDate(selected) : placeholder || '请选择日期'}</span>
+      {/if}
+      {#if !disabled && (range ? (startText || endText) : selected !== null)}
+        <span class="dp-clear" role="button" tabindex="-1" aria-label="清空"
+          onclick={(e) => { e.stopPropagation(); clearValue(); open = false; }}>×</span>
+      {/if}
+    </button>
+    {#if shownError}<div class="widget-error-text" role="alert">{shownError}</div>{/if}
+
+    {#snippet calPanel(cellsList: Cell[], title: string, yearTitle: string, nav: 'prev' | 'next' | 'both')}
+      <div class="dp-calendar">
+        <div class="dp-header">
+          <div class="dp-header-nav">
+            {#if nav === 'prev' || nav === 'both'}
+              <button type="button" class="dp-nav" onclick={prevYear} aria-label="上一年">«</button>
+              <button type="button" class="dp-nav" onclick={prevMonth} aria-label="上个月">‹</button>
+            {/if}
+          </div>
+          <span class="dp-title">
+            <span class="dp-title-year">{yearTitle}</span>
+            {title}
+          </span>
+          <div class="dp-header-nav">
+            {#if nav === 'next' || nav === 'both'}
+              <button type="button" class="dp-nav" onclick={nextMonth} aria-label="下个月">›</button>
+              <button type="button" class="dp-nav" onclick={nextYear} aria-label="下一年">»</button>
+            {/if}
+          </div>
+        </div>
+        <div class="dp-week-header">
+          {#each WEEK_LABELS as w}<span class="dp-week">{w}</span>{/each}
+        </div>
+        <div class="dp-grid" onmouseleave={() => (hoverTs = null)}>
+          {#each cellsList as c (c.ts)}
+            <button
+              type="button"
+              class={cellCls(c)}
+              onclick={() => pickCell(c)}
+              onmouseover={() => (hoverTs = c.ts)}
+              disabled={c.disabled}
+            >{c.day}</button>
+          {/each}
+        </div>
+      </div>
+    {/snippet}
+
+    {#if open}
+      <div class="dp-panel" class:dp-range={range}>
+        {#if range}
+          <div class="dp-panels">
+            {@render calPanel(leftCells, leftTitle, leftYearTitle, 'prev')}
+            {@render calPanel(rightCells, rightTitle, rightYearTitle, 'next')}
+          </div>
+        {:else}
+          {@render calPanel(leftCells, leftTitle, leftYearTitle, 'both')}
+        {/if}
+
+        {#if showTime}
+          <div class="dp-time">
+            {#if range}
+              <div class="dp-time-groups">
+                <div class="dp-time-group">
+                  <span class="dp-time-label">开始</span>
+                  <input class="dp-time-input" type="number" min="0" max="23" value={tStart.h} oninput={(e) => setTime('start', 'h', e)} aria-label="开始 时" />
+                  <span class="dp-time-sep">:</span>
+                  <input class="dp-time-input" type="number" min="0" max="59" value={tStart.m} oninput={(e) => setTime('start', 'm', e)} aria-label="开始 分" />
+                  <span class="dp-time-sep">:</span>
+                  <input class="dp-time-input" type="number" min="0" max="59" value={tStart.s} oninput={(e) => setTime('start', 's', e)} aria-label="开始 秒" />
+                </div>
+                <span class="dp-time-arrow" aria-hidden="true">~</span>
+                <div class="dp-time-group">
+                  <span class="dp-time-label">结束</span>
+                  <input class="dp-time-input" type="number" min="0" max="23" value={tEnd.h} oninput={(e) => setTime('end', 'h', e)} aria-label="结束 时" />
+                  <span class="dp-time-sep">:</span>
+                  <input class="dp-time-input" type="number" min="0" max="59" value={tEnd.m} oninput={(e) => setTime('end', 'm', e)} aria-label="结束 分" />
+                  <span class="dp-time-sep">:</span>
+                  <input class="dp-time-input" type="number" min="0" max="59" value={tEnd.s} oninput={(e) => setTime('end', 's', e)} aria-label="结束 秒" />
+                </div>
+              </div>
+              <div class="dp-footer">
+                <button type="button" class="dp-ok" onclick={confirmTime} disabled={rangeStart === null}>确定</button>
+              </div>
+            {:else}
+              <div class="dp-time-group">
+                <input class="dp-time-input" type="number" min="0" max="23" value={tSingle.h} oninput={(e) => setTime('single', 'h', e)} aria-label="时" />
+                <span class="dp-time-sep">:</span>
+                <input class="dp-time-input" type="number" min="0" max="59" value={tSingle.m} oninput={(e) => setTime('single', 'm', e)} aria-label="分" />
+                <span class="dp-time-sep">:</span>
+                <input class="dp-time-input" type="number" min="0" max="59" value={tSingle.s} oninput={(e) => setTime('single', 's', e)} aria-label="秒" />
+                <button type="button" class="dp-ok" onclick={confirmTime} disabled={selected === null}>确定</button>
+              </div>
+            {/if}
+          </div>
+        {/if}
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .widget-date-picker {
+    position: relative;
+  }
+
+  .dp-input {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    font-size: 0.875rem;
+    background-color: #ffffff;
+    cursor: pointer;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    text-align: left;
+  }
+  .dp-input:hover { border-color: #4096ff; }
+  .dp-input:focus-within,
+  .dp-input:focus {
+    outline: none;
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+  }
+  /* 禁用态：置灰 + 禁止交互 */
+  .dp-input:disabled {
+    background-color: #f5f5f5;
+    color: rgba(0, 0, 0, 0.25);
+    border-color: #d9d9d9;
+    cursor: not-allowed;
+  }
+  .dp-input:disabled:hover { border-color: #d9d9d9; }
+  .dp-input-icon { font-size: 0.875rem; }
+  .dp-input-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .dp-seg { flex: 1 1 0; min-width: 0; }
+  .dp-sep { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; }
+  .dp-placeholder { color: rgba(0, 0, 0, 0.45); }
+  .dp-clear {
+    padding: 0 0.25rem;
+    color: rgba(0, 0, 0, 0.45);
+    font-size: 1rem;
+    line-height: 1;
+  }
+  .dp-clear:hover { color: rgba(0, 0, 0, 0.88); }
+
+  .dp-panel {
+    position: absolute;
+    z-index: 50;
+    top: calc(100% + 4px);
+    left: 0;
+    width: 288px;
+    padding: 0.75rem;
+    background: #ffffff;
+    border: 1px solid #d9d9d9;
+    border-radius: 8px;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  }
+  /* range 模式：双月历并排，宽度自适应 */
+  .dp-panel.dp-range { width: auto; }
+  .dp-panels { display: flex; gap: 0.75rem; }
+  .dp-calendar { width: 264px; }
+
+  .dp-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+  }
+  .dp-title { font-weight: 600; font-size: 0.875rem; color: rgba(0, 0, 0, 0.88); }
+  /* antd 风格：年份弱化、月份强调 */
+  .dp-title-year { font-weight: 400; color: rgba(0, 0, 0, 0.45); margin-right: 0.25rem; }
+  .dp-header-nav { display: flex; align-items: center; gap: 0.125rem; min-width: 3.25rem; }
+  .dp-header-nav:last-child { justify-content: flex-end; }
+  .dp-nav {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 1.1rem;
+    cursor: pointer;
+    border-radius: 4px;
+  }
+  .dp-nav:hover { background: #f5f5f5; color: rgba(0, 0, 0, 0.88); }
+
+  .dp-week-header {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    margin-bottom: 0.25rem;
+  }
+  .dp-week {
+    text-align: center;
+    font-size: 0.75rem;
+    color: rgba(0, 0, 0, 0.45);
+    padding: 0.25rem 0;
+  }
+
+  .dp-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+  }
+  .dp-cell {
+    position: relative;
+    height: 2rem;
+    border: none;
+    background: transparent;
+    border-radius: 4px;
+    font-size: 0.8125rem;
+    color: rgba(0, 0, 0, 0.88);
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+  .dp-cell:hover:not(.dp-cell-disabled) { background: #f5f5f5; }
+  .dp-cell-out { color: rgba(0, 0, 0, 0.25); }
+  .dp-cell-disabled { color: rgba(0, 0, 0, 0.25); cursor: not-allowed; }
+  .dp-cell-today { color: #1677ff; font-weight: 600; }
+  .dp-cell-selected,
+  .dp-cell-range-start,
+  .dp-cell-range-end {
+    background: #1677ff;
+    color: #ffffff;
+    font-weight: 600;
+  }
+  /* antd 风格：区间首尾胶囊圆角 */
+  .dp-cell-range-start { border-radius: 4px 0 0 4px; }
+  .dp-cell-range-end { border-radius: 0 4px 4px 0; }
+  .dp-cell-range-start.dp-cell-range-end { border-radius: 4px; }
+  .dp-cell-in-range { background: #e6f4ff; color: #1677ff; }
+  .dp-cell-in-range:hover { background: #bae0ff; }
+
+  .dp-time {
+    margin-top: 0.75rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #f0f0f0;
+  }
+  .dp-time-groups {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+  .dp-time-group {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  .dp-time-label { font-size: 0.75rem; color: rgba(0, 0, 0, 0.65); }
+  .dp-time-arrow { color: rgba(0, 0, 0, 0.45); font-size: 0.75rem; }
+  .dp-time-input {
+    width: 2.75rem;
+    padding: 0.25rem;
+    text-align: center;
+    border: 1px solid #d9d9d9;
+    border-radius: 4px;
+    font-size: 0.8125rem;
+  }
+  .dp-time-input:focus {
+    outline: none;
+    border-color: #1677ff;
+    box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+  }
+  .dp-time-sep { color: rgba(0, 0, 0, 0.65); }
+  .dp-footer {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 0.5rem;
+  }
+  .dp-ok {
+    margin-left: auto;
+    padding: 0.3rem 0.75rem;
+    background: #1677ff;
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    font-size: 0.8125rem;
+    cursor: pointer;
+  }
+  .dp-ok:hover:not(:disabled) { background: #4096ff; }
+  .dp-ok:disabled { background: #91caff; cursor: not-allowed; }
+</style>