minnan/src/components/form/DateTimePicker.vue

<template>
  <Picker
    v-bind="props"
    :value="value"
    :columns="columns"
    @selectTextChange="() => {}"
    @update:value="updateValue"
  />
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue';
import type { PickerProps } from './Picker.vue';
import type { PickerItem } from './Picker';
import Picker from './Picker.vue';
import { DateUtils } from '@imengyu/imengyu-utils';

// 更新 DateTimePickerProps 接口，添加日期相关属性
export interface DateTimePickerProps extends Omit<PickerProps, 'columns'|'value'> {
  modelValue?: Date,
  showYears?: boolean,
  showMonths?: boolean,
  showDays?: boolean,
  showHours?: boolean,
  showMinute?: boolean,
  showSecond?: boolean,
  startYear?: number,
  endYear?: number,
  startMonth?: number,
  endMonth?: number,
  startDay?: number,
  endDay?: number,
  minuteText?: string,
  secondText?: string,
  hourText?: string,
  yearText?: string,
  monthText?: string,
  dayText?: string,
}

const emit = defineEmits([ 'update:modelValue', 'selectTextChange' ]);
const props = withDefaults(defineProps<DateTimePickerProps>(), {
  pickerHeight: 300,
  pickerWidth: 750,
  showYears: true,
  showMonths: true,
  showDays: true,
  showHours: true,
  showMinute: true,
  showSecond: true,
  startYear: () => new Date().getFullYear() - 50,
  endYear: () => new Date().getFullYear() + 20,
  startMonth: 1,
  endMonth: 12,
  startDay: 1,
  endDay: 31, 
  yearText: '年',
  monthText: '月',
  dayText: '日',
  minuteText: '分',
  secondText: '秒',
  hourText: '时',
});

// 计算当前选中的值
const value = computed(() => {
  const value : number[] = [];
  let date = props.modelValue;
  if (!date)
    date = new Date();
  if (!(date instanceof Date))
    date = typeof date === 'string' ? DateUtils.parseDate(date) : new Date();
  if (props.showYears) 
    value.push(date.getFullYear());
  if (props.showMonths)
    value.push(date.getMonth() + 1);
  if (props.showDays)
    value.push(date.getDate());
  if (props.showHours) 
    value.push(date.getHours());  
  if (props.showMinute)
    value.push(date.getMinutes());
  if (props.showSecond)
    value.push(date.getSeconds());
  return value;
});

// 计算选择器的列数据
const columns = computed(() => {
  const cols = [] as PickerItem[][];
  const currentDate = props.modelValue ?? new Date();

  // 年份列
  if (props.showYears) {
    const years = [] as PickerItem[];
    for (let i = props.startYear!; i <= props.endYear!; i++) {
      years.push({
        text: i.toString() + props.yearText,
        value: i,
      });
    }
    cols.push(years);
  }

  // 月份列
  if (props.showMonths) {
    const months = [] as PickerItem[];
    for (let i = props.startMonth!; i <= props.endMonth!; i++) {
      months.push({
        text: i.toString() + props.monthText,
        value: i,
      });
    }
    cols.push(months);
  }

  // 日期列
  if (props.showDays) {
    const selectedYear = props.showYears ? value.value[0] : currentDate.getFullYear();
    const selectedMonth = props.showMonths ? value.value[1] : currentDate.getMonth() + 1;
    const daysInMonth = DateUtils.getMonthDays(selectedYear, selectedMonth - 1) ?? 0;
    const days = [] as PickerItem[];
    for (let i = props.startDay; i <= daysInMonth; i++) {
      days.push({
        text: i.toString() + props.dayText,
        value: i,
      });
    }
    cols.push(days);
  }

  // 小时列
  if (props.showHours) {
    const hours = [] as PickerItem[];
    for (let i = 0; i < 24; i++) {
      hours.push({
        text: i.toString() + props.hourText,
        value: i,
      });
    }
    cols.push(hours);
  }

  // 分钟列
  if (props.showMinute) {
    const minutes = [] as PickerItem[];
    for (let i = 0; i < 60; i++) {
      minutes.push({
        text: i.toString() + props.minuteText,
        value: i,
      });
    }
    cols.push(minutes);
  }

  // 秒数列
  if (props.showSecond) {
    const seconds = [] as PickerItem[];
    for (let i = 0; i < 60; i++) {
      seconds.push({
        text: i.toString() + props.secondText,
        value: i,
      });
    }
    cols.push(seconds);
  }
  return cols;
});

let forceUpdate = true;

// 更新选中的值
function updateValue(v: number[]) {
  if (props.modelValue || v.length > 0) {
    const date = new Date(props.modelValue ?? new Date());
    let index = 0;
    if (v.length > 0) {
      if (props.showYears) {
        date.setFullYear(v[index]);
        index++;
      }
      if (props.showMonths) {
        date.setMonth(v[index] - 1); 
        index++;
      }
      if (props.showDays) {
        date.setDate(v[index]);
        index++;
      }
      if (props.showHours) {
        date.setHours(v[index]);
        index++;
      }
      if (props.showMinute) {
        date.setMinutes(v[index]);
        index++;
      }
      if (props.showSecond) {
        date.setSeconds(v[index]);
      }
      emit('update:modelValue', date);
    }
    emit('selectTextChange', DateUtils.formatDate(date, 'yyyy-MM-dd'), forceUpdate);
  } else {
    emit('selectTextChange', '', forceUpdate);
  }
  forceUpdate = false;
}
onMounted(() => updateValue([]));

defineOptions({
  options: {
    styleIsolation: "shared",
    virtualHost: true,
  }
})
</script>