@yxhl/specter-pui-vtk 1.0.76 → 1.0.78

package/src/components/assembly/VtkDateTimePicker.vue

@@ -0,0 +1,1370 @@
+<template>
+  <div class="vtk-date-time-picker">
+    <VMenu
+      v-if="!inline"
+      v-model="showPicker"
+      :attach="menuAttach"
+      :location="menuLocation"
+      :origin="menuOrigin"
+      :width="menuWidth"
+      :min-width="menuWidth"
+      offset="4"
+      :close-on-content-click="false"
+    >
+      <template #activator="{ props: menuProps }">
+        <div class="date-time-input">
+          <VTextField
+            :model-value="displayValue"
+            :placeholder="placeholder"
+            :disabled="disabled"
+            density="compact"
+            variant="outlined"
+            hide-details
+            readonly
+            v-bind="menuProps"
+            :clearable="clearable && !!displayValue && !disabled"
+            clear-icon="mdi-close-circle"
+            persistent-clear
+            class="date-time-input-field"
+            @click:clear.stop="clearValue"
+          >
+            <template #append-inner>
+              <VIcon size="16" class="date-time-icon">mdi-clock-outline</VIcon>
+            </template>
+          </VTextField>
+        </div>
+      </template>
+
+      <div class="date-time-picker-dropdown" :class="{ 'range-mode': isRange }" @click.stop @mousedown.stop>
+        <template v-if="isRange">
+          <div class="range-input-row">
+            <input class="range-date-input" :value="formatDatePart(tempRange[0])" readonly placeholder="开始日期" />
+            <button
+              class="range-time-input"
+              type="button"
+              :class="{ active: activeTimeSide === 'start' }"
+              @click="openRangeTime('start')"
+            >
+              {{ formatTimePart(tempRange[0]) || defaultStartTime }}
+            </button>
+            <span class="range-arrow">›</span>
+            <input class="range-date-input" :value="formatDatePart(tempRange[1])" readonly placeholder="结束日期" />
+            <button
+              class="range-time-input"
+              type="button"
+              :class="{ active: activeTimeSide === 'end' }"
+              @click="openRangeTime('end')"
+            >
+              {{ formatTimePart(tempRange[1]) || defaultEndTime }}
+            </button>
+
+            <div v-if="activeTimeSide" :class="['range-time-popover', activeTimeSide]">
+              <div class="time-columns compact">
+                <div class="time-column">
+                  <button
+                    v-for="hour in hourOptions"
+                    :key="hour"
+                    type="button"
+                    :class="['time-item', { selected: hour === activeRangeHour }]"
+                    @click="selectRangeTime('hour', hour)"
+                  >
+                    {{ padTime(hour) }}
+                  </button>
+                </div>
+                <div class="time-column">
+                  <button
+                    v-for="minute in minuteOptions"
+                    :key="minute"
+                    type="button"
+                    :class="['time-item', { selected: minute === activeRangeMinute }]"
+                    @click="selectRangeTime('minute', minute)"
+                  >
+                    {{ padTime(minute) }}
+                  </button>
+                </div>
+                <div v-if="showSeconds" class="time-column">
+                  <button
+                    v-for="second in secondOptions"
+                    :key="second"
+                    type="button"
+                    :class="['time-item', { selected: second === activeRangeSecond }]"
+                    @click="selectRangeTime('second', second)"
+                  >
+                    {{ padTime(second) }}
+                  </button>
+                </div>
+              </div>
+              <div class="time-popover-footer">
+                <button class="btn btn-text small" type="button" @click="activeTimeSide = null">取消</button>
+                <button class="btn btn-primary small" type="button" @click="activeTimeSide = null">确定</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="range-calendar-shell">
+            <div class="calendar-panel">
+              <div class="calendar-header">
+                <button class="nav-btn-small" type="button" @click="prevLeftMonth">‹</button>
+                <span class="month-title">{{ leftYear }} 年 {{ leftMonth + 1 }} 月</span>
+                <button class="nav-btn-small invisible" type="button">›</button>
+              </div>
+              <div class="week-header">
+                <div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
+              </div>
+              <div class="day-grid">
+                <button
+                  v-for="day in leftDayList"
+                  :key="day.date"
+                  type="button"
+                  :class="rangeDayClass(day)"
+                  @click="selectRangeDay(day)"
+                >
+                  {{ day.day }}
+                </button>
+              </div>
+            </div>
+
+            <div class="calendar-divider"></div>
+
+            <div class="calendar-panel">
+              <div class="calendar-header">
+                <button class="nav-btn-small invisible" type="button">‹</button>
+                <span class="month-title">{{ rightYear }} 年 {{ rightMonth + 1 }} 月</span>
+                <button class="nav-btn-small" type="button" @click="nextRightMonth">›</button>
+              </div>
+              <div class="week-header">
+                <div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
+              </div>
+              <div class="day-grid">
+                <button
+                  v-for="day in rightDayList"
+                  :key="day.date"
+                  type="button"
+                  :class="rangeDayClass(day)"
+                  @click="selectRangeDay(day)"
+                >
+                  {{ day.day }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <template v-else>
+          <div class="single-input-row">
+            <input class="single-date-input" :value="formatDatePart(tempDate)" readonly placeholder="请选择日期" />
+            <button
+              class="single-time-input"
+              type="button"
+              :class="{ active: activeSingleTime }"
+              @click="activeSingleTime = true"
+            >
+              {{ singleTimeValue }}
+            </button>
+
+            <div v-if="activeSingleTime" class="single-time-popover">
+              <div class="time-columns compact">
+                <div class="time-column">
+                  <button
+                    v-for="hour in hourOptions"
+                    :key="hour"
+                    type="button"
+                    :class="['time-item', { selected: hour === selectedHour, disabled: isTimePartDisabled(hour, selectedMinute, selectedSecond) }]"
+                    @click="selectHour(hour)"
+                  >
+                    {{ padTime(hour) }}
+                  </button>
+                </div>
+                <div class="time-column">
+                  <button
+                    v-for="minute in minuteOptions"
+                    :key="minute"
+                    type="button"
+                    :class="['time-item', { selected: minute === selectedMinute, disabled: isTimePartDisabled(selectedHour, minute, selectedSecond) }]"
+                    @click="selectMinute(minute)"
+                  >
+                    {{ padTime(minute) }}
+                  </button>
+                </div>
+                <div v-if="showSeconds" class="time-column">
+                  <button
+                    v-for="second in secondOptions"
+                    :key="second"
+                    type="button"
+                    :class="['time-item', { selected: second === selectedSecond, disabled: isTimePartDisabled(selectedHour, selectedMinute, second) }]"
+                    @click="selectSecond(second)"
+                  >
+                    {{ padTime(second) }}
+                  </button>
+                </div>
+              </div>
+              <div class="time-popover-footer">
+                <button class="btn btn-text small" type="button" @click="activeSingleTime = false">取消</button>
+                <button class="btn btn-primary small" type="button" @click="activeSingleTime = false">确定</button>
+              </div>
+            </div>
+          </div>
+
+          <div class="single-calendar-panel">
+            <div class="picker-header single-header">
+              <button class="nav-btn" type="button" @click="prevPeriod">‹</button>
+              <div class="header-title">
+                <span class="clickable" @click="changeViewMode('year')">{{ currentYear }} 年</span>
+                <span v-if="viewMode !== 'year'" class="clickable" @click="changeViewMode('month')">
+                  {{ currentMonth + 1 }} 月
+                </span>
+              </div>
+              <button class="nav-btn" type="button" @click="nextPeriod">›</button>
+            </div>
+
+            <div v-if="viewMode === 'year'" class="picker-body">
+              <div class="year-grid">
+                <button
+                  v-for="year in yearList"
+                  :key="year"
+                  type="button"
+                  :class="['year-item', { selected: year === currentYear, disabled: isYearDisabled(year) }]"
+                  @click="selectYear(year)"
+                >
+                  {{ year }}
+                </button>
+              </div>
+            </div>
+
+            <div v-else-if="viewMode === 'month'" class="picker-body">
+              <div class="month-grid">
+                <button
+                  v-for="(month, index) in monthList"
+                  :key="month"
+                  type="button"
+                  :class="['month-item', { selected: index === currentMonth, disabled: isMonthDisabled(index) }]"
+                  @click="selectMonth(index)"
+                >
+                  {{ month }}
+                </button>
+              </div>
+            </div>
+
+            <div v-else class="picker-body">
+              <div class="week-header">
+                <div v-for="day in weekDays" :key="day" class="week-day">{{ day }}</div>
+              </div>
+              <div class="day-grid">
+                <button
+                  v-for="day in dayList"
+                  :key="day.date"
+                  type="button"
+                  :class="['day-item', {
+                    'other-month': day.otherMonth,
+                    selected: isDaySelected(day),
+                    today: day.isToday,
+                    disabled: isDayDisabled(day)
+                  }]"
+                  @click="selectDay(day)"
+                >
+                  {{ day.day }}
+                </button>
+              </div>
+            </div>
+          </div>
+        </template>
+
+        <div class="picker-footer">
+          <button v-if="!isRange" class="btn btn-text" type="button" @click="handleNow">此刻</button>
+          <button v-if="isRange" class="btn btn-text" type="button" @click="clearTempRange">清空</button>
+          <span class="footer-spacer"></span>
+          <button class="btn btn-text" type="button" @click="handleCancel">取消</button>
+          <button class="btn btn-primary" type="button" :disabled="!canConfirm" @click="handleConfirm">确定</button>
+        </div>
+      </div>
+    </VMenu>
+
+    <div v-if="inline" class="date-time-picker-dropdown inline-mode" :class="{ 'range-mode': isRange }" @click.stop @mousedown.stop>
+      <div class="inline-message">内联模式请使用默认单选面板。</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, watch } from 'vue';
+
+defineOptions({
+  name: 'VtkDateTimePicker',
+});
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Date, Number, Array],
+    default: null
+  },
+  mode: {
+    type: String,
+    default: 'single',
+    validator: (value) => ['single', 'range'].includes(value)
+  },
+  placeholder: {
+    type: String,
+    default: '请选择日期时间'
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  format: {
+    type: String,
+    default: 'YYYY-MM-DD HH:mm:ss'
+  },
+  valueFormat: {
+    type: String,
+    default: 'YYYY-MM-DD HH:mm:ss'
+  },
+  separator: {
+    type: String,
+    default: ' 至 '
+  },
+  min: {
+    type: [String, Date, Number],
+    default: null
+  },
+  max: {
+    type: [String, Date, Number],
+    default: null
+  },
+  disableFuture: {
+    type: Boolean,
+    default: false
+  },
+  minuteStep: {
+    type: Number,
+    default: 1
+  },
+  secondStep: {
+    type: Number,
+    default: 1
+  },
+  showSeconds: {
+    type: Boolean,
+    default: true
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  },
+  placement: {
+    type: String,
+    default: 'left',
+    validator: (value) => ['left', 'right'].includes(value)
+  },
+  noTeleport: {
+    type: Boolean,
+    default: false
+  },
+  onCancel: {
+    type: Function,
+    default: null
+  },
+  onConfirm: {
+    type: Function,
+    default: null
+  }
+});
+
+const emit = defineEmits(['update:modelValue', 'change', 'cancel', 'confirm']);
+
+const showPicker = ref(false);
+const selectedDateTime = ref(null);
+const selectedRange = ref([]);
+const tempDate = ref(null);
+const tempRange = ref([null, null]);
+const currentYear = ref(new Date().getFullYear());
+const currentMonth = ref(new Date().getMonth());
+const leftYear = ref(new Date().getFullYear());
+const leftMonth = ref(new Date().getMonth());
+const rightYear = ref(new Date().getMonth() === 11 ? new Date().getFullYear() + 1 : new Date().getFullYear());
+const rightMonth = ref(new Date().getMonth() === 11 ? 0 : new Date().getMonth() + 1);
+const viewMode = ref('day');
+const selectedHour = ref(0);
+const selectedMinute = ref(0);
+const selectedSecond = ref(0);
+const activeRangeSide = ref('start');
+const activeTimeSide = ref(null);
+const activeSingleTime = ref(false);
+
+const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+const monthList = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
+const defaultStartTime = '00:00:00';
+const defaultEndTime = '23:59:59';
+
+const isRange = computed(() => props.mode === 'range');
+const menuAttach = computed(() => (props.noTeleport ? true : false));
+const menuLocation = computed(() => props.placement === 'right' ? 'bottom end' : 'bottom start');
+const menuOrigin = computed(() => props.placement === 'right' ? 'top end' : 'top start');
+const menuWidth = computed(() => isRange.value ? 646 : 360);
+const minDateTime = computed(() => parseValue(props.min));
+const maxDateTime = computed(() => parseValue(props.max));
+const hourOptions = computed(() => Array.from({ length: 24 }, (_, index) => index));
+const minuteOptions = computed(() => buildStepOptions(props.minuteStep));
+const secondOptions = computed(() => buildStepOptions(props.secondStep));
+
+const yearList = computed(() => {
+  const startYear = Math.floor(currentYear.value / 12) * 12;
+  return Array.from({ length: 12 }, (_, index) => startYear + index);
+});
+
+const dayList = computed(() => getDayList(currentYear.value, currentMonth.value));
+const leftDayList = computed(() => getDayList(leftYear.value, leftMonth.value));
+const rightDayList = computed(() => getDayList(rightYear.value, rightMonth.value));
+
+const displayValue = computed(() => {
+  if (isRange.value) {
+    if (!selectedRange.value.length) return '';
+    const [start, end] = selectedRange.value;
+    return [start, end].filter(Boolean).map(date => formatByPattern(date, props.format)).join(props.separator);
+  }
+  return selectedDateTime.value ? formatByPattern(selectedDateTime.value, props.format) : '';
+});
+
+const previewValue = computed(() => tempDate.value ? formatByPattern(buildTempDateTime(), props.format) : '');
+const singleTimeValue = computed(() => {
+  const pattern = props.showSeconds ? 'HH:mm:ss' : 'HH:mm';
+  const date = buildTempDateTime() || new Date(2000, 0, 1, selectedHour.value, selectedMinute.value, selectedSecond.value);
+  return formatByPattern(date, pattern);
+});
+
+const canConfirm = computed(() => {
+  if (isRange.value) {
+    const [start, end] = tempRange.value;
+    return !!start && !!end && start <= end && !isDateTimeDisabled(start) && !isDateTimeDisabled(end);
+  }
+  if (!tempDate.value) return false;
+  return !isDateTimeDisabled(buildTempDateTime());
+});
+
+const activeRangeDate = computed(() => {
+  return activeTimeSide.value === 'end' ? tempRange.value[1] : tempRange.value[0];
+});
+
+const activeRangeHour = computed(() => activeRangeDate.value ? activeRangeDate.value.getHours() : 0);
+const activeRangeMinute = computed(() => activeRangeDate.value ? activeRangeDate.value.getMinutes() : 0);
+const activeRangeSecond = computed(() => activeRangeDate.value ? activeRangeDate.value.getSeconds() : 0);
+
+const buildStepOptions = (step) => {
+  const normalizedStep = Number.isFinite(step) && step > 0 ? Math.max(1, Math.floor(step)) : 1;
+  const options = [];
+  for (let value = 0; value < 60; value += normalizedStep) {
+    options.push(value);
+  }
+  return options;
+};
+
+const getDayList = (year, month) => {
+  const firstDay = new Date(year, month, 1);
+  const startDay = firstDay.getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const daysInPrevMonth = new Date(year, month, 0).getDate();
+  const today = new Date();
+  const days = [];
+
+  for (let index = startDay - 1; index >= 0; index -= 1) {
+    days.push(createDay(new Date(year, month - 1, daysInPrevMonth - index), true, today));
+  }
+  for (let day = 1; day <= daysInMonth; day += 1) {
+    days.push(createDay(new Date(year, month, day), false, today));
+  }
+  for (let day = 1; days.length < 42; day += 1) {
+    days.push(createDay(new Date(year, month + 1, day), true, today));
+  }
+
+  return days;
+};
+
+const createDay = (date, otherMonth, today) => ({
+  date: formatByPattern(date, 'YYYY-MM-DD'),
+  day: date.getDate(),
+  year: date.getFullYear(),
+  month: date.getMonth(),
+  otherMonth,
+  isToday: isSameDate(date, today)
+});
+
+const padTime = (value) => String(value).padStart(2, '0');
+
+const formatByPattern = (date, pattern) => {
+  if (!(date instanceof Date) || Number.isNaN(date.getTime())) return '';
+  const replacements = {
+    YYYY: date.getFullYear(),
+    MM: padTime(date.getMonth() + 1),
+    DD: padTime(date.getDate()),
+    HH: padTime(date.getHours()),
+    mm: padTime(date.getMinutes()),
+    ss: padTime(date.getSeconds())
+  };
+  return Object.keys(replacements).reduce((result, token) => {
+    return result.replace(new RegExp(token, 'g'), replacements[token]);
+  }, pattern);
+};
+
+const formatDatePart = (date) => date ? formatByPattern(date, 'YYYY-MM-DD') : '';
+const formatTimePart = (date) => date ? formatByPattern(date, props.showSeconds ? 'HH:mm:ss' : 'HH:mm') : '';
+
+const parseValue = (value) => {
+  if (!value && value !== 0) return null;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : new Date(value.getTime());
+  if (typeof value === 'number') {
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+  }
+  if (typeof value !== 'string') return null;
+
+  const normalized = value.trim().replace(/\//g, '-');
+  const match = normalized.match(/^(\d{4})-(\d{1,2})-(\d{1,2})(?:[ T](\d{1,2}):(\d{1,2})(?::(\d{1,2}))?)?/);
+  if (!match) {
+    const fallback = new Date(value);
+    return Number.isNaN(fallback.getTime()) ? null : fallback;
+  }
+
+  const [, year, month, day, hour = '0', minute = '0', second = '0'] = match;
+  const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hour), Number(minute), Number(second));
+  return Number.isNaN(date.getTime()) ? null : date;
+};
+
+const parseRangeValue = (value) => {
+  if (Array.isArray(value)) return value.map(parseValue).filter(Boolean).slice(0, 2);
+  if (typeof value === 'string' && value.includes(props.separator)) {
+    return value.split(props.separator).map(item => parseValue(item.trim())).filter(Boolean).slice(0, 2);
+  }
+  return [];
+};
+
+const toModelValue = (date) => {
+  if (!date) return null;
+  if (props.valueFormat === 'timestamp') return date.getTime();
+  if (props.valueFormat === 'Date') return new Date(date.getTime());
+  return formatByPattern(date, props.valueFormat);
+};
+
+const toModelRange = (range) => range.map(date => toModelValue(date));
+
+const isSameDate = (left, right) => {
+  return left.getFullYear() === right.getFullYear()
+    && left.getMonth() === right.getMonth()
+    && left.getDate() === right.getDate();
+};
+
+const buildTempDateTime = (hour = selectedHour.value, minute = selectedMinute.value, second = selectedSecond.value) => {
+  if (!tempDate.value) return null;
+  return new Date(tempDate.value.getFullYear(), tempDate.value.getMonth(), tempDate.value.getDate(), hour, minute, props.showSeconds ? second : 0);
+};
+
+const isDateTimeDisabled = (date) => {
+  if (!date) return true;
+  if (minDateTime.value && date < minDateTime.value) return true;
+  if (maxDateTime.value && date > maxDateTime.value) return true;
+  if (props.disableFuture && date > new Date()) return true;
+  return false;
+};
+
+const isYearDisabled = (year) => {
+  const start = new Date(year, 0, 1, 0, 0, 0);
+  const end = new Date(year, 11, 31, 23, 59, 59);
+  if (minDateTime.value && end < minDateTime.value) return true;
+  if (maxDateTime.value && start > maxDateTime.value) return true;
+  if (props.disableFuture && start > new Date()) return true;
+  return false;
+};
+
+const isMonthDisabled = (month) => {
+  const start = new Date(currentYear.value, month, 1, 0, 0, 0);
+  const end = new Date(currentYear.value, month + 1, 0, 23, 59, 59);
+  if (minDateTime.value && end < minDateTime.value) return true;
+  if (maxDateTime.value && start > maxDateTime.value) return true;
+  if (props.disableFuture && start > new Date()) return true;
+  return false;
+};
+
+const isDayDisabled = (day) => {
+  const start = new Date(day.year, day.month, day.day, 0, 0, 0);
+  const end = new Date(day.year, day.month, day.day, 23, 59, 59);
+  if (minDateTime.value && end < minDateTime.value) return true;
+  if (maxDateTime.value && start > maxDateTime.value) return true;
+  if (props.disableFuture && start > new Date()) return true;
+  return false;
+};
+
+const isTimePartDisabled = (hour, minute, second) => {
+  if (!tempDate.value) return false;
+  return isDateTimeDisabled(buildTempDateTime(hour, minute, second));
+};
+
+const isDaySelected = (day) => {
+  if (!tempDate.value) return false;
+  return tempDate.value.getFullYear() === day.year
+    && tempDate.value.getMonth() === day.month
+    && tempDate.value.getDate() === day.day;
+};
+
+const isRangeDaySelected = (day, side) => {
+  const date = tempRange.value[side === 'start' ? 0 : 1];
+  return !!date && date.getFullYear() === day.year && date.getMonth() === day.month && date.getDate() === day.day;
+};
+
+const isRangeDayInRange = (day) => {
+  const [start, end] = tempRange.value;
+  if (!start || !end) return false;
+  const date = new Date(day.year, day.month, day.day, 12, 0, 0);
+  return date > start && date < end;
+};
+
+const rangeDayClass = (day) => ['day-item', {
+  'other-month': day.otherMonth,
+  today: day.isToday,
+  disabled: isDayDisabled(day),
+  selected: isRangeDaySelected(day, 'start') || isRangeDaySelected(day, 'end'),
+  'range-start': isRangeDaySelected(day, 'start'),
+  'range-end': isRangeDaySelected(day, 'end'),
+  'in-range': isRangeDayInRange(day)
+}];
+
+const setSinglePanelFromDate = (date) => {
+  if (!date) return;
+  currentYear.value = date.getFullYear();
+  currentMonth.value = date.getMonth();
+  tempDate.value = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+  selectedHour.value = date.getHours();
+  selectedMinute.value = date.getMinutes();
+  selectedSecond.value = date.getSeconds();
+};
+
+const setRangePanelsFromDate = (date) => {
+  const base = date || new Date();
+  leftYear.value = base.getFullYear();
+  leftMonth.value = base.getMonth();
+  const right = new Date(base.getFullYear(), base.getMonth() + 1, 1);
+  rightYear.value = right.getFullYear();
+  rightMonth.value = right.getMonth();
+};
+
+const initializePicker = () => {
+  if (isRange.value) {
+    tempRange.value = selectedRange.value.length ? selectedRange.value.map(date => new Date(date.getTime())) : [null, null];
+    setRangePanelsFromDate(tempRange.value[0] || new Date());
+    activeRangeSide.value = tempRange.value[0] && !tempRange.value[1] ? 'end' : 'start';
+    activeTimeSide.value = null;
+    return;
+  }
+  setSinglePanelFromDate(selectedDateTime.value || new Date());
+  viewMode.value = 'day';
+  activeSingleTime.value = false;
+};
+
+const prevPeriod = () => {
+  if (viewMode.value === 'year') currentYear.value -= 12;
+  else if (viewMode.value === 'month') currentYear.value -= 1;
+  else if (currentMonth.value === 0) {
+    currentMonth.value = 11;
+    currentYear.value -= 1;
+  } else currentMonth.value -= 1;
+};
+
+const nextPeriod = () => {
+  if (viewMode.value === 'year') currentYear.value += 12;
+  else if (viewMode.value === 'month') currentYear.value += 1;
+  else if (currentMonth.value === 11) {
+    currentMonth.value = 0;
+    currentYear.value += 1;
+  } else currentMonth.value += 1;
+};
+
+const prevLeftMonth = () => {
+  const left = new Date(leftYear.value, leftMonth.value - 1, 1);
+  leftYear.value = left.getFullYear();
+  leftMonth.value = left.getMonth();
+  const right = new Date(leftYear.value, leftMonth.value + 1, 1);
+  rightYear.value = right.getFullYear();
+  rightMonth.value = right.getMonth();
+};
+
+const nextRightMonth = () => {
+  const right = new Date(rightYear.value, rightMonth.value + 1, 1);
+  rightYear.value = right.getFullYear();
+  rightMonth.value = right.getMonth();
+  const left = new Date(rightYear.value, rightMonth.value - 1, 1);
+  leftYear.value = left.getFullYear();
+  leftMonth.value = left.getMonth();
+};
+
+const changeViewMode = (mode) => {
+  viewMode.value = mode;
+};
+
+const selectYear = (year) => {
+  if (isYearDisabled(year)) return;
+  currentYear.value = year;
+  viewMode.value = 'month';
+};
+
+const selectMonth = (month) => {
+  if (isMonthDisabled(month)) return;
+  currentMonth.value = month;
+  viewMode.value = 'day';
+};
+
+const selectDay = (day) => {
+  if (isDayDisabled(day)) return;
+  tempDate.value = new Date(day.year, day.month, day.day);
+};
+
+const selectRangeDay = (day) => {
+  if (isDayDisabled(day)) return;
+  const selected = new Date(day.year, day.month, day.day);
+  if (activeRangeSide.value === 'start' || !tempRange.value[0] || (tempRange.value[0] && tempRange.value[1])) {
+    const currentStart = tempRange.value[0];
+    selected.setHours(currentStart?.getHours() ?? 0, currentStart?.getMinutes() ?? 0, props.showSeconds ? currentStart?.getSeconds() ?? 0 : 0, 0);
+    tempRange.value = [selected, null];
+    activeRangeSide.value = 'end';
+  } else {
+    const currentEnd = tempRange.value[1];
+    selected.setHours(currentEnd?.getHours() ?? 23, currentEnd?.getMinutes() ?? 59, props.showSeconds ? currentEnd?.getSeconds() ?? 59 : 0, 0);
+    const start = tempRange.value[0];
+    tempRange.value = start <= selected ? [start, selected] : [selected, start];
+    activeRangeSide.value = 'start';
+  }
+};
+
+const selectHour = (hour) => {
+  if (isTimePartDisabled(hour, selectedMinute.value, selectedSecond.value)) return;
+  selectedHour.value = hour;
+};
+
+const selectMinute = (minute) => {
+  if (isTimePartDisabled(selectedHour.value, minute, selectedSecond.value)) return;
+  selectedMinute.value = minute;
+};
+
+const selectSecond = (second) => {
+  if (isTimePartDisabled(selectedHour.value, selectedMinute.value, second)) return;
+  selectedSecond.value = second;
+};
+
+const openRangeTime = (side) => {
+  activeTimeSide.value = side;
+  activeRangeSide.value = side;
+  const index = side === 'start' ? 0 : 1;
+  if (!tempRange.value[index]) {
+    const base = new Date();
+    base.setHours(side === 'start' ? 0 : 23, side === 'start' ? 0 : 59, props.showSeconds ? side === 'start' ? 0 : 59 : 0, 0);
+    tempRange.value[index] = base;
+  }
+};
+
+const selectRangeTime = (part, value) => {
+  const index = activeTimeSide.value === 'end' ? 1 : 0;
+  const fallback = new Date();
+  const date = tempRange.value[index] ? new Date(tempRange.value[index].getTime()) : fallback;
+  if (part === 'hour') date.setHours(value);
+  if (part === 'minute') date.setMinutes(value);
+  if (part === 'second') date.setSeconds(value);
+  if (!props.showSeconds) date.setSeconds(0);
+  date.setMilliseconds(0);
+  tempRange.value[index] = date;
+};
+
+const closePicker = () => {
+  showPicker.value = false;
+  activeSingleTime.value = false;
+};
+
+const clearTempRange = () => {
+  tempRange.value = [null, null];
+  activeRangeSide.value = 'start';
+  activeTimeSide.value = null;
+};
+
+const clearValue = () => {
+  if (isRange.value) {
+    selectedRange.value = [];
+    tempRange.value = [null, null];
+    emit('update:modelValue', []);
+    emit('change', []);
+  } else {
+    selectedDateTime.value = null;
+    tempDate.value = null;
+    emit('update:modelValue', null);
+    emit('change', null);
+  }
+};
+
+const confirm = () => {
+  if (!canConfirm.value) return;
+  if (isRange.value) {
+    selectedRange.value = tempRange.value.map(date => new Date(date.getTime()));
+    const modelValue = toModelRange(selectedRange.value);
+    emit('update:modelValue', modelValue);
+    emit('change', modelValue);
+    closePicker();
+    return;
+  }
+  const nextValue = buildTempDateTime();
+  selectedDateTime.value = nextValue;
+  const modelValue = toModelValue(nextValue);
+  emit('update:modelValue', modelValue);
+  emit('change', modelValue);
+  closePicker();
+};
+
+const handleCancel = () => {
+  if (props.onCancel) {
+    props.onCancel();
+  } else {
+    emit('cancel');
+    closePicker();
+  }
+};
+
+const handleConfirm = () => {
+  const value = isRange.value ? toModelRange(tempRange.value) : toModelValue(buildTempDateTime());
+  if (props.onConfirm) {
+    props.onConfirm(value);
+  } else {
+    emit('confirm', value);
+    confirm();
+  }
+};
+
+const handleNow = () => {
+  const now = new Date();
+  if (isDateTimeDisabled(now)) return;
+  setSinglePanelFromDate(now);
+};
+
+watch(showPicker, (isOpen) => {
+  if (isOpen) initializePicker();
+});
+
+watch(() => props.modelValue, (newValue) => {
+  if (isRange.value) {
+    selectedRange.value = parseRangeValue(newValue);
+  } else {
+    selectedDateTime.value = parseValue(newValue);
+  }
+}, { immediate: true });
+</script>
+
+<style scoped>
+.vtk-date-time-picker {
+  position: relative;
+  width: 100%;
+}
+
+.date-time-input {
+  width: 100%;
+}
+
+.date-time-input-field {
+  cursor: pointer;
+}
+
+:deep(.date-time-input-field .v-field),
+:deep(.date-time-input-field input) {
+  cursor: pointer;
+}
+
+.date-time-icon {
+  margin-left: 8px;
+  color: rgb(var(--v-theme-on-surface), 0.6);
+}
+
+.date-time-picker-dropdown {
+  background: rgb(var(--v-theme-surface));
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+  border: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+  overflow: visible;
+}
+
+.date-time-picker-dropdown.range-mode {
+  width: 646px;
+  min-width: 646px;
+  max-width: 646px;
+}
+
+.date-time-picker-dropdown:not(.range-mode) {
+  width: 360px;
+  min-width: 360px;
+  max-width: none;
+}
+
+.date-time-picker-dropdown.inline-mode {
+  box-shadow: none;
+  width: fit-content;
+  border: none;
+}
+
+.picker-shell,
+.range-calendar-shell {
+  display: flex;
+  align-items: stretch;
+  flex-wrap: nowrap;
+}
+
+.date-panel {
+  width: 288px;
+  border-right: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+}
+
+.calendar-panel {
+  flex: 0 0 322px;
+  width: 322px;
+  min-width: 322px;
+  max-width: 322px;
+  padding: 12px 16px 16px;
+  box-sizing: border-box;
+}
+
+.calendar-divider {
+  flex: 0 0 1px;
+  width: 1px;
+  background: rgb(var(--v-theme-on-surface), 0.12);
+}
+
+.picker-header,
+.calendar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.picker-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+}
+
+.picker-header.single-header {
+  border-bottom: none;
+  padding: 14px 16px 8px;
+}
+
+.calendar-header {
+  height: 36px;
+  margin-bottom: 8px;
+}
+
+.header-title,
+.month-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.clickable {
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+.clickable:hover {
+  background: rgb(var(--v-theme-on-surface), 0.08);
+}
+
+.nav-btn,
+.nav-btn-small {
+  border: none;
+  background: none;
+  color: rgb(var(--v-theme-on-surface), 0.6);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.2s;
+}
+
+.nav-btn {
+  font-size: 20px;
+  padding: 4px 12px;
+}
+
+.nav-btn-small {
+  font-size: 18px;
+  padding: 4px 8px;
+}
+
+.nav-btn:hover,
+.nav-btn-small:hover {
+  background: rgb(var(--v-theme-on-surface), 0.08);
+}
+
+.nav-btn-small.invisible {
+  visibility: hidden;
+}
+
+.picker-body {
+  padding: 10px 16px 16px;
+  min-height: 250px;
+}
+
+.year-grid,
+.month-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+}
+
+.year-item,
+.month-item {
+  height: 42px;
+  border: 1px solid transparent;
+  background: transparent;
+  text-align: center;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 13px;
+}
+
+.year-item:hover,
+.month-item:hover {
+  background: rgb(var(--v-theme-on-surface), 0.08);
+}
+
+.year-item.selected,
+.month-item.selected {
+  background: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+}
+
+.week-header {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+  margin-bottom: 6px;
+}
+
+.week-day {
+  text-align: center;
+  padding: 6px 0;
+  font-size: 12px;
+  color: rgb(var(--v-theme-on-surface), 0.6);
+  font-weight: 500;
+}
+
+.day-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.day-item {
+  aspect-ratio: 1;
+  border: 1px solid transparent;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.2s;
+  font-size: 13px;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.day-item:hover {
+  background: rgb(var(--v-theme-on-surface), 0.08);
+}
+
+.day-item.other-month {
+  color: rgb(var(--v-theme-on-surface), 0.38);
+}
+
+.day-item.today {
+  color: rgb(var(--v-theme-primary));
+  font-weight: 600;
+}
+
+.day-item.selected,
+.day-item.range-start,
+.day-item.range-end {
+  background: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+}
+
+.day-item.in-range {
+  background: rgb(var(--v-theme-primary), 0.1);
+}
+
+.year-item.disabled,
+.month-item.disabled,
+.day-item.disabled,
+.time-item.disabled {
+  color: rgb(var(--v-theme-on-surface), 0.26) !important;
+  background: rgb(var(--v-theme-on-surface), 0.04) !important;
+  cursor: not-allowed !important;
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.time-panel {
+  width: 156px;
+}
+
+.time-header {
+  height: 49px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 500;
+  color: rgb(var(--v-theme-on-surface));
+  border-bottom: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+}
+
+.time-columns {
+  display: flex;
+  height: 250px;
+}
+
+.time-columns.compact {
+  height: 192px;
+}
+
+.time-column {
+  flex: 1;
+  overflow-y: auto;
+  padding: 6px 0;
+  border-right: 1px solid rgb(var(--v-theme-on-surface), 0.08);
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.time-column::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
+.time-column:last-child {
+  border-right: none;
+}
+
+.time-item {
+  width: 100%;
+  height: 28px;
+  border: none;
+  background: transparent;
+  color: rgb(var(--v-theme-on-surface));
+  cursor: pointer;
+  font-size: 13px;
+  transition: all 0.2s;
+}
+
+.time-item:hover {
+  background: rgb(var(--v-theme-on-surface), 0.08);
+}
+
+.time-item.selected {
+  color: rgb(var(--v-theme-primary));
+  font-weight: 600;
+  background: rgb(var(--v-theme-primary), 0.1);
+}
+
+.range-input-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-wrap: nowrap;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+  box-sizing: border-box;
+}
+
+.single-input-row {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 9px 12px;
+  border-bottom: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+  box-sizing: border-box;
+}
+
+.single-date-input,
+.single-time-input {
+  flex: 0 0 auto;
+  width: 150px;
+  height: 32px;
+  border: 1px solid rgb(var(--v-theme-on-surface), 0.16);
+  border-radius: 4px;
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 13px;
+  padding: 0 12px;
+  outline: none;
+}
+
+.single-time-input {
+  text-align: left;
+  cursor: pointer;
+}
+
+.single-time-input.active,
+.single-time-input:focus,
+.single-date-input:focus {
+  border-color: rgb(var(--v-theme-primary));
+}
+
+.single-calendar-panel {
+  width: 360px;
+}
+
+.range-date-input,
+.range-time-input {
+  flex: 0 0 auto;
+  height: 32px;
+  border: 1px solid rgb(var(--v-theme-on-surface), 0.16);
+  border-radius: 4px;
+  background: rgb(var(--v-theme-surface));
+  color: rgb(var(--v-theme-on-surface));
+  font-size: 13px;
+  padding: 0 12px;
+  outline: none;
+}
+
+.range-date-input {
+  width: 144px;
+}
+
+.range-time-input {
+  width: 132px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.range-time-input.active,
+.range-time-input:focus,
+.range-date-input:focus {
+  border-color: rgb(var(--v-theme-primary));
+}
+
+.range-arrow {
+  flex: 0 0 16px;
+  width: 16px;
+  text-align: center;
+  color: rgb(var(--v-theme-on-surface), 0.6);
+  font-size: 22px;
+}
+
+.range-time-popover {
+  position: absolute;
+  top: 45px;
+  width: 180px;
+  z-index: 2;
+  background: rgb(var(--v-theme-surface));
+  border: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+
+.single-time-popover {
+  position: absolute;
+  top: 45px;
+  left: 156px;
+  width: 180px;
+  z-index: 2;
+  background: rgb(var(--v-theme-surface));
+  border: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+}
+
+.range-time-popover.start {
+  left: 162px;
+}
+
+.range-time-popover.end {
+  left: 430px;
+}
+
+.time-popover-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 8px 10px;
+  border-top: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+}
+
+.selected-display {
+  padding: 10px 16px;
+  border-top: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+  text-align: center;
+}
+
+.selected-text {
+  font-size: 14px;
+  color: rgb(var(--v-theme-on-surface));
+}
+
+.placeholder-text,
+.inline-message {
+  font-size: 14px;
+  color: rgb(var(--v-theme-on-surface), 0.38);
+}
+
+.inline-message {
+  padding: 16px;
+}
+
+.picker-footer {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-top: 1px solid rgb(var(--v-theme-on-surface), 0.12);
+}
+
+.footer-spacer {
+  flex: 1;
+}
+
+.btn {
+  padding: 8px 16px;
+  border-radius: 4px;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: none;
+  outline: none;
+}
+
+.btn.small {
+  padding: 4px 8px;
+  font-size: 12px;
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.btn-text {
+  background: none;
+  color: rgb(var(--v-theme-primary));
+}
+
+.btn-text:hover:not(:disabled) {
+  background: rgb(var(--v-theme-on-surface), 0.08);
+}
+
+.btn-primary {
+  background: rgb(var(--v-theme-primary));
+  color: rgb(var(--v-theme-on-primary));
+}
+
+.btn-primary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+</style>