@lumen-design/date-time-picker 0.0.2

package/dist/DateTimePicker.svelte

@@ -0,0 +1,387 @@
+<script lang="ts">
+    import { createDropdownTransition } from '../../utils'
+    import { onDestroy, onMount } from 'svelte'
+    import Icon from '@lumen-design/icon'
+    import { Calendar, ChevronLeft, ChevronRight, X, ChevronDown, ChevronsLeft, ChevronsRight } from 'lucide'
+
+    import type { DateTimePickerProps } from './types'
+
+    const pad2 = (n: number): string => String(n).padStart(2, '0')
+
+    const parseTimeParts = (val: string): { h: string; m: string; s: string } => {
+        if (!val) return { h: '00', m: '00', s: '00' }
+        const [h = '00', m = '00', s = '00'] = val.split(':')
+        return {
+            h: h.padStart(2, '0').slice(-2),
+            m: m.padStart(2, '0').slice(-2),
+            s: s.padStart(2, '0').slice(-2),
+        }
+    }
+
+    const formatDate = (date: Date, fmt: string): string => {
+        const y = date.getFullYear()
+        const m = pad2(date.getMonth() + 1)
+        const d = pad2(date.getDate())
+        return fmt.replace('YYYY', String(y)).replace('MM', m).replace('DD', d)
+    }
+
+    const formatTime = (date: Date, timeFormat: string): string => {
+        const h = pad2(date.getHours())
+        const m = pad2(date.getMinutes())
+        const s = pad2(date.getSeconds())
+        return timeFormat.includes('ss') ? `${h}:${m}:${s}` : `${h}:${m}`
+    }
+
+    const normalizeTimeInput = (input: string, timeFormat: string): string => {
+        const raw = (input ?? '').trim()
+        if (!raw) return ''
+        const wantSeconds = timeFormat.includes('ss')
+        const parts = raw.split(':')
+        if (parts.length < 2 || parts.length > 3) return ''
+
+        const h = Number.parseInt(parts[0] ?? '0', 10)
+        const m = Number.parseInt(parts[1] ?? '0', 10)
+        const s = Number.parseInt(parts[2] ?? '0', 10)
+        if (!Number.isFinite(h) || !Number.isFinite(m) || (!wantSeconds && parts.length === 3 && !Number.isFinite(s))) return ''
+        if (h < 0 || h > 23 || m < 0 || m > 59) return ''
+        if (wantSeconds && (s < 0 || s > 59)) return ''
+        return wantSeconds ? `${pad2(h)}:${pad2(m)}:${pad2(s)}` : `${pad2(h)}:${pad2(m)}`
+    }
+
+    const toDate = (val: Date | string): Date => (val instanceof Date ? val : new Date(val))
+
+    const parseDateInput = (input: string): Date | null => {
+        const raw = (input ?? '').trim()
+        if (!raw) return null
+        const parts = raw.replace(/\//g, '-').split('-')
+        if (parts.length !== 3) return null
+        const y = Number.parseInt(parts[0] ?? '0', 10)
+        const m = Number.parseInt(parts[1] ?? '0', 10)
+        const d = Number.parseInt(parts[2] ?? '0', 10)
+        if (!Number.isFinite(y) || !Number.isFinite(m) || !Number.isFinite(d)) return null
+        if (y < 1000 || m < 1 || m > 12 || d < 1 || d > 31) return null
+        const dt = new Date(y, m - 1, d)
+        // reject overflow dates like 2026-02-31
+        if (dt.getFullYear() !== y || dt.getMonth() !== m - 1 || dt.getDate() !== d) return null
+        return dt
+    }
+
+    const combine = (dateOnly: Date, t: { h: string; m: string; s: string }, timeFormat: string): Date => {
+        const next = new Date(dateOnly)
+        const h = Number.parseInt(t.h, 10)
+        const m = Number.parseInt(t.m, 10)
+        const s = Number.parseInt(t.s, 10)
+        next.setHours(Number.isFinite(h) ? h : 0, Number.isFinite(m) ? m : 0, timeFormat.includes('ss') && Number.isFinite(s) ? s : 0, 0)
+        return next
+    }
+
+    let {
+        modelValue = $bindable<Date | string | null>(null),
+        placeholder = '选择日期时间',
+        disabled = false,
+        clearable = false,
+        readonly = false,
+        size = 'default',
+        dateFormat = 'YYYY-MM-DD',
+        datePlaceholder = '选择日期',
+        timeFormat = 'HH:mm:ss',
+        defaultTime = '00:00:00',
+        timePlaceholder = '选择时间',
+        showMenuArrow = true,
+        class: cls = '',
+        ...attrs
+    }: DateTimePickerProps = $props()
+
+    const showSeconds = $derived(timeFormat.includes('ss'))
+
+    let visible = $state(false)
+    let reduceMotion = $state(false)
+    let rootRef: HTMLDivElement | null = $state(null)
+
+    let currentYear = $state(new Date().getFullYear())
+    let currentMonth = $state(new Date().getMonth())
+
+    let tempDate = $state<Date | null>(null)
+    let tempDateText = $state('')
+    let tempTime = $state('')
+
+    const dropdownId = `lm-date-time-picker-dropdown-${Math.random().toString(36).slice(2)}`
+
+    const selectedCommitted = $derived(modelValue ? toDate(modelValue) : null)
+
+    const displayValue = $derived.by(() => {
+        if (!selectedCommitted) return ''
+        const dateStr = formatDate(selectedCommitted, dateFormat)
+        const timeStr = formatTime(selectedCommitted, timeFormat)
+        return `${dateStr} ${timeStr}`
+    })
+
+    const weekDays = ['日', '一', '二', '三', '四', '五', '六']
+
+    const daysInMonth = $derived.by(() => {
+        const firstDay = new Date(currentYear, currentMonth, 1)
+        const lastDay = new Date(currentYear, currentMonth + 1, 0)
+        const days: { date: Date; isCurrentMonth: boolean }[] = []
+        const startDay = firstDay.getDay()
+
+        for (let i = startDay - 1; i >= 0; i--) {
+            days.push({ date: new Date(currentYear, currentMonth, -i), isCurrentMonth: false })
+        }
+        for (let i = 1; i <= lastDay.getDate(); i++) {
+            days.push({ date: new Date(currentYear, currentMonth, i), isCurrentMonth: true })
+        }
+        const remaining = 42 - days.length
+        for (let i = 1; i <= remaining; i++) {
+            days.push({ date: new Date(currentYear, currentMonth + 1, i), isCurrentMonth: false })
+        }
+        return days
+    })
+
+    const isSelected = (date: Date): boolean => {
+        if (!tempDate) return false
+        return date.getFullYear() === tempDate.getFullYear() && date.getMonth() === tempDate.getMonth() && date.getDate() === tempDate.getDate()
+    }
+
+    const isToday = (date: Date): boolean => {
+        const today = new Date()
+        return date.getFullYear() === today.getFullYear() && date.getMonth() === today.getMonth() && date.getDate() === today.getDate()
+    }
+
+    const openWithCommittedOrNow = (): void => {
+        const base = selectedCommitted ?? new Date()
+        tempDate = new Date(base.getFullYear(), base.getMonth(), base.getDate())
+        tempDateText = formatDate(tempDate, dateFormat)
+
+        if (selectedCommitted) tempTime = formatTime(selectedCommitted, timeFormat)
+        else tempTime = normalizeTimeInput(defaultTime, timeFormat) || (showSeconds ? '00:00:00' : '00:00')
+
+        currentYear = base.getFullYear()
+        currentMonth = base.getMonth()
+    }
+
+    const toggle = (): void => {
+        if (disabled || readonly) return
+        const next = !visible
+        visible = next
+        if (next) openWithCommittedOrNow()
+    }
+
+    const closeAndRevert = (): void => {
+        visible = false
+        // revert temp state next time open
+    }
+
+    const handleKeydown = (e: KeyboardEvent): void => {
+        if (e.key === 'Escape') closeAndRevert()
+        else if (e.key === 'Enter' || e.key === ' ') toggle()
+    }
+
+    const handleClickOutside = (e: MouseEvent): void => {
+        if (visible && rootRef && !rootRef.contains(e.target as Node)) closeAndRevert()
+    }
+
+    const handleClear = (e: MouseEvent): void => {
+        e.stopPropagation()
+        modelValue = null
+        closeAndRevert()
+    }
+
+    const prevMonth = (): void => {
+        if (currentMonth === 0) {
+            currentMonth = 11
+            currentYear--
+        } else {
+            currentMonth--
+        }
+    }
+
+    const prevYear = (): void => {
+        currentYear--
+    }
+
+    const nextMonth = (): void => {
+        if (currentMonth === 11) {
+            currentMonth = 0
+            currentYear++
+        } else {
+            currentMonth++
+        }
+    }
+
+    const nextYear = (): void => {
+        currentYear++
+    }
+
+    const handleSelectDate = (date: Date): void => {
+        tempDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+        tempDateText = formatDate(tempDate, dateFormat)
+    }
+
+    const setNow = (): void => {
+        const now = new Date()
+        tempDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+        tempDateText = formatDate(tempDate, dateFormat)
+
+        tempTime = formatTime(now, timeFormat)
+
+        currentYear = now.getFullYear()
+        currentMonth = now.getMonth()
+    }
+
+    const normalizedDate = $derived.by(() => parseDateInput(tempDateText) ?? tempDate)
+
+    const isDateValid = $derived.by(() => !!normalizedDate)
+
+    const isTimeValid = $derived.by(() => {
+        const normalized = normalizeTimeInput(tempTime || defaultTime, timeFormat)
+        return !!normalized
+    })
+
+    const handleConfirm = (): void => {
+        const normalized = normalizeTimeInput(tempTime || defaultTime, timeFormat)
+        const dateToUse = normalizedDate
+        if (!dateToUse || !normalized) return
+        modelValue = combine(dateToUse, parseTimeParts(normalized), timeFormat)
+        visible = false
+    }
+
+    const dropdownTransition = $derived(createDropdownTransition(reduceMotion))
+
+    $effect(() => {
+        if (visible) document.addEventListener('click', handleClickOutside)
+        return () => document.removeEventListener('click', handleClickOutside)
+    })
+
+
+    onMount(() => {
+        if (typeof window !== 'undefined') {
+            reduceMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)')?.matches ?? false
+        }
+    })
+
+    onDestroy(() => {
+        document.removeEventListener('click', handleClickOutside)
+    })
+
+    const classes = $derived(['lm-date-time-picker', `lm-date-time-picker--${size}`, disabled && 'is-disabled', cls].filter(Boolean).join(' '))
+</script>
+
+<div bind:this={rootRef} class={classes} {...attrs}>
+    <div
+        class="lm-date-time-picker__trigger"
+        class:is-focus={visible}
+        role="combobox"
+        tabindex={disabled ? -1 : 0}
+        aria-controls={dropdownId}
+        aria-expanded={visible}
+        aria-disabled={disabled}
+        onclick={toggle}
+        onkeydown={handleKeydown}
+    >
+        <span class="lm-date-time-picker__prefix">
+            <Icon icon={Calendar} size={14} />
+        </span>
+        <span class="lm-date-time-picker__value" class:is-placeholder={!displayValue}>
+            {displayValue || placeholder}
+        </span>
+
+        {#if clearable && modelValue && !disabled}
+            <button type="button" class="lm-date-time-picker__clear" onclick={handleClear} aria-label="清除">
+                <Icon icon={X} size={14} />
+            </button>
+        {:else}
+            <span class="lm-date-time-picker__arrow" class:is-open={visible} aria-hidden="true">
+                <Icon icon={ChevronDown} size={14} />
+            </span>
+        {/if}
+    </div>
+
+    {#if visible}
+        <div id={dropdownId} class="lm-date-time-picker__dropdown" role="dialog" transition:dropdownTransition>
+            {#if showMenuArrow}
+                <div class="lm-date-time-picker__menu-arrow" aria-hidden="true"></div>
+            {/if}
+
+            <div class="lm-date-time-picker__panel">
+                <div class="lm-date-time-picker__date-panel">
+                    <div class="lm-date-time-picker__time-inputs" aria-label="日期时间输入">
+                        <input
+                            class="lm-date-time-picker__date-input"
+                            type="text"
+                            value={tempDateText}
+                            placeholder={datePlaceholder}
+                            oninput={(e: Event) => (tempDateText = (e.currentTarget as HTMLInputElement).value)}
+                            onblur={() => {
+                                const parsed = parseDateInput(tempDateText)
+                                if (parsed) {
+                                    tempDate = parsed
+                                    tempDateText = formatDate(parsed, dateFormat)
+                                    currentYear = parsed.getFullYear()
+                                    currentMonth = parsed.getMonth()
+                                }
+                            }}
+                        />
+                        <input
+                            class="lm-date-time-picker__time-input"
+                            type="text"
+                            value={tempTime}
+                            placeholder={timePlaceholder}
+                            oninput={(e: Event) => (tempTime = (e.currentTarget as HTMLInputElement).value)}
+                            onblur={() => {
+                                const normalized = normalizeTimeInput(tempTime, timeFormat)
+                                if (normalized) tempTime = normalized
+                            }}
+                        />
+                    </div>
+
+                    <div class="lm-date-time-picker__header">
+                        <div class="lm-date-time-picker__nav-group" aria-hidden="false">
+                            <button type="button" class="lm-date-time-picker__nav" onclick={prevYear} aria-label="上一年">
+                                <Icon icon={ChevronsLeft} size={16} />
+                            </button>
+                            <button type="button" class="lm-date-time-picker__nav" onclick={prevMonth} aria-label="上个月">
+                                <Icon icon={ChevronLeft} size={14} />
+                            </button>
+                        </div>
+                        <span class="lm-date-time-picker__title">{currentYear}年 {currentMonth + 1}月</span>
+                        <div class="lm-date-time-picker__nav-group" aria-hidden="false">
+                            <button type="button" class="lm-date-time-picker__nav" onclick={nextMonth} aria-label="下个月">
+                                <Icon icon={ChevronRight} size={14} />
+                            </button>
+                            <button type="button" class="lm-date-time-picker__nav" onclick={nextYear} aria-label="下一年">
+                                <Icon icon={ChevronsRight} size={16} />
+                            </button>
+                        </div>
+                    </div>
+
+                    <div class="lm-date-time-picker__body">
+                        <div class="lm-date-time-picker__week">
+                            {#each weekDays as day}
+                                <span class="lm-date-time-picker__week-day">{day}</span>
+                            {/each}
+                        </div>
+                        <div class="lm-date-time-picker__days">
+                            {#each daysInMonth as item (item.date.toISOString())}
+                                <button
+                                    type="button"
+                                    class="lm-date-time-picker__day"
+                                    class:is-other={!item.isCurrentMonth}
+                                    class:is-today={isToday(item.date)}
+                                    class:is-selected={isSelected(item.date)}
+                                    onclick={() => handleSelectDate(item.date)}
+                                >
+                                    {item.date.getDate()}
+                                </button>
+                            {/each}
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="lm-date-time-picker__footer">
+                <button type="button" class="lm-date-time-picker__btn lm-date-time-picker__btn--text" onclick={setNow}>此刻</button>
+                <button type="button" class="lm-date-time-picker__btn" onclick={handleConfirm} disabled={!isDateValid || !isTimeValid}>确定</button>
+            </div>
+        </div>
+    {/if}
+</div>

package/dist/index.js

@@ -0,0 +1,3 @@
+import DateTimePicker from './DateTimePicker.svelte';
+export default DateTimePicker;
+export { DateTimePicker };

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@lumen-design/date-time-picker",
+  "version": "0.0.2",
+  "description": "DateTimePicker component for Lumen UI",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src -o dist --types",
+    "build:watch": "svelte-package -i src -o dist --types -w"
+  },
+  "dependencies": {
+    "@lumen-design/icon": "0.0.2",
+    "lucide": "^0.563.0",
+    "@lumen-design/utils": "0.0.2"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.5.7",
+    "svelte": "5.48.2"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  }
+}