如何使用vue3-datepicker获取正确的日期时间格式？

问题根源 #

你使用的@vuepic/vue-datepicker组件默认会将v-model绑定值返回为Date对象（日期选择场景）或包含时分秒的对象（时间选择场景），而非你需要的格式化字符串。直接将这些原始值传入DataTable时，就会显示成默认的toString()结果或JSON格式。

方案一：通过组件属性直接格式化绑定值（推荐） #

利用组件自带的格式化配置，让v-model直接返回目标格式的字符串，无需额外处理：

1. 日期格式处理 #

修改日期选择器代码，添加model-value-format属性指定输出格式（EEE MMM dd对应Thu Nov 24的格式），同时移除冗余的Datepicker标签：

<Datepicker
  v-model="workout.date"
  input-format="dd/MM/YYYY"
  model-value-format="EEE MMM dd"
/>

2. 时间格式处理 #

给带时间选择器的组件添加time-model-value-format属性，指定时间输出格式为HH:mm：

<Datepicker 
  v-model="workout.startTime" 
  time-picker
  time-model-value-format="HH:mm"
/>

这样workout.date和workout.startTime会直接以你需要的字符串格式存储，传入DataTable后即可正常显示。

方案二：在提交表单时手动格式化 #

如果因组件版本限制无法使用上述属性，可以在提交时手动转换格式：

const submitForm = () => {
  // 格式化日期：将Date对象转为Thu Nov 24格式
  const formattedDate = new Date(workout.value.date).toLocaleDateString('en-US', {
    weekday: 'short',
    month: 'short',
    day: 'numeric'
  });

  // 格式化时间：将时分秒对象转为HH:mm格式
  const formattedStartTime = `${String(workout.value.startTime.hours).padStart(2, '0')}:${String(workout.value.startTime.minutes).padStart(2, '0')}`;

  // 传入格式化后的数据
  addWorkout({ 
    ...workout.value,
    date: formattedDate,
    startTime: formattedStartTime
  });

  // 重置表单
  workout.value.name = '';
  workout.value.trainer = '';
  workout.value.description = '';
  workout.value.location = '';
  workout.value.startTime = '';
  workout.value.endTime = '';
  
  router.push({ name: 'Workouts' });
};

方案三：在DataTable中格式化显示（保留原始数据） #

如果需要保留原始Date/时间对象用于后续逻辑，仅在显示时格式化，可以使用DataTable的列模板：

<DataTable :value="workouts">
  <Column field="date" header="Kuupäev">
    <template #body="{ data }">
      {{ new Date(data.date).toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) }}
    </template>
  </Column>
  <Column field="startTime" header="Algus">
    <template #body="{ data }">
      {{ `${String(data.startTime.hours).padStart(2, '0')}:${String(data.startTime.minutes).padStart(2, '0')}` }}
    </template>
  </Column>
</DataTable>

补充：TypeScript类型适配 #

确保Workout接口的类型与实际绑定值匹配：

// @/model/workout.ts
export interface Workout {
  name: string;
  trainer: string;
  description: string;
  location: string;
  date: string; // 使用方案一/二时为字符串类型
  startTime: string; // 使用方案一/二时为字符串类型；方案三时为{ hours: number; minutes: number; seconds: number }
  endTime: string;
}

内容的提问来源于stack exchange，提问作者Karjur