如何将VueDatePicker选择的纯时间转换为含当日日期的完整DateTime对象以适配ASP.NET Core后端与SQL Server存储

刚好我之前做项目时也遇到过一模一样的需求，其实处理起来没那么复杂，给你分享几个实用的办法：

首先得明确：当你开启time-picker选项后，VueDatePicker返回的Date对象，日期部分是默认的1970-01-01（Unix纪元起始日），咱们要做的就是把日期替换成今天的日期，同时保留用户选择的时、分、秒信息。

方法一：手动构建完整DateTime对象 #

这是最直观的方式，拆分今天的日期和选择的时间，再组合到一起：

<template>
  <VueDatePicker v-model="selectedTime" time-picker />
  <button @click="handleSubmit">提交配送时间</button>
</template>

<script setup>
import { ref } from 'vue'
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'

const selectedTime = ref(null)

const handleSubmit = () => {
  if (!selectedTime.value) {
    alert('请选择配送时间哦')
    return
  }

  // 1. 获取今天的日期对象
  const today = new Date()
  // 2. 从选择的时间里提取时、分、秒
  const pickerHours = selectedTime.value.getHours()
  const pickerMinutes = selectedTime.value.getMinutes()
  const pickerSeconds = selectedTime.value.getSeconds()

  // 3. 组合成今日日期+选择时间的完整DateTime对象
  const fullDeliveryTime = new Date(
    today.getFullYear(),
    today.getMonth(),
    today.getDate(),
    pickerHours,
    pickerMinutes,
    pickerSeconds
  )

  // 4. 准备传给后端的payload，用ISO格式字符串后端能自动解析
  const payload = {
    DeliveryTime: fullDeliveryTime.toISOString()
  }

  // 这里替换成你的API请求逻辑，比如axios.post('/api/orders', payload)
  console.log('传给后端的完整时间:', payload)
}
</script>

方法二：直接修改今日日期对象（更简洁） #

如果觉得手动构建参数麻烦，也可以直接在今天的日期对象上修改时间部分：

const handleSubmit = () => {
  if (!selectedTime.value) return

  const fullDeliveryTime = new Date() // 直接取今天的日期
  // 覆盖时间部分为用户选择的时、分、秒
  fullDeliveryTime.setHours(
    selectedTime.value.getHours(),
    selectedTime.value.getMinutes(),
    selectedTime.value.getSeconds()
  )

  const payload = {
    DeliveryTime: fullDeliveryTime.toISOString()
  }
  // 后续API请求...
}

后端与数据库适配注意事项 #

• ASP.NET Core 这边，你只需要在请求模型里定义DateTime类型的字段就行，默认的模型绑定会自动解析前端传的ISO格式字符串：

  public class OrderCreateRequest
  {
      public DateTime DeliveryTime { get; set; }
  }
  

• SQL Server 存储时，推荐用datetime2类型的字段（比旧的datetime精度更高，范围更大），EF Core 会自动把C#的DateTime映射到这个字段，完全不用额外处理。

小提醒：时区问题 #

如果你的用户和后端服务器不在同一个时区，比如用户在东八区，服务器在UTC时区，那最好把前端的时间转成UTC再传给后端，后端存UTC时间，显示时再转成用户本地时间。只需要和后端提前约定好时区规则，就能避免时间偏差问题。

内容来源于stack exchange