minnan/src/components/form/DatePicker.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 Picker from './Picker.vue';
import { DateUtils } from '@imengyu/imengyu-utils';
import type { PickerItem } from './Picker';

// 更新 DatePickerProps 接口
export interface DatePickerProps extends Omit<PickerProps, 'columns'|'value'> {
  modelValue?: Date,
  showYears?: boolean,
  showMonths?: boolean,
  showDays?: boolean,
  startYear?: number,
  endYear?: number,
  startMonth?: number,
  endMonth?: number,
  startDay?: number,
  endDay?: number,
  yearText?: string,
  monthText?: string,
  dayText?: string,
}

const emit = defineEmits([ 'update:modelValue', 'selectTextChange' ]);
const props = withDefaults(defineProps<DatePickerProps>(), {
  pickerHeight: 300,
  pickerWidth: 750,
  showYears: true,
  showMonths: true,
  showDays: true,
  startYear: () => new Date().getFullYear() - 10,
  endYear: () => new Date().getFullYear() + 10,
  startMonth: 1,
  endMonth: 12,
  startDay: 1,
  // 暂时设为 31，后续根据年月动态调整
  endDay: 31, 
  yearText: '年',
  monthText: '月',
  dayText: '日',
});

let forceUpdate = true;

// 计算当前选中的值
const value = computed(() => {
  const value : number[] = [];
  let date = props.modelValue;
  if (!date)
    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());
  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);
  }

  return cols;
});

// 更新选中的值
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) {
        // 月份从 0 开始，所以减 1
        date.setMonth(v[index] - 1); 
        index++;
      }
      if (props.showDays) {
        date.setDate(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>