Vue项目日期数据传递

Vue项目日期数据传递

对于前端传参，你需要将日期时间选择器的值转换为ISO 8601格式（例如：“2023-03-24T15:30:00”），这是JSON和后端框架广泛支持的一种日期时间字符串格式。

在Vue.js中使用element-ui的时间选择器组件时，可以这样处理：

<el-date-picker
  v-model="updateTimeValue"
  type="datetime"
  placeholder="选择更新时间"
  value-format="yyyy-MM-dd HH:mm:ss"
/>

<script setup>
import { ref } from 'vue';

const updateTimeValue = ref('');

// 在提交表单或发送请求前进行格式化
function handleSubmit() {
  const updateTimeToSend = updateTimeValue.value ? updateTimeValue.value.replace(' ', 'T') : null;
  // 现在你可以将 updateTimeToSend 作为参数发送给后端
}
</script>

在后端，假设你已经在字段上添加了@JsonFormat(pattern = "yyyy-MM-dd hh:mm:ss")注解，Spring MVC会自动将接收到的ISO 8601格式字符串解析成LocalDateTime对象。

注意：示例中的value-format属性用于控制元素UI显示的格式，而实际传输到后端的格式需要通过JavaScript转换为标准的ISO 8601格式。同时，请确保你的@JsonFormat注解中的pattern与前端传递的字符串格式一致（这里示例代码中使用的是24小时制，所以是"HH"）。