uniapp date类型字段提交不了yyyy-mm-dd格式是怎么回事？

在uniapp中提交表单时，date类型的字段无法正确提交yyyy-mm-dd格式的数据，后台接收到的值总是显示为时间戳或其他格式。尝试使用@change事件转换格式，但提交后仍然失效。请问如何确保date类型字段能正常提交yyyy-mm-dd格式的字符串？是否需要配置额外的转换规则或格式化方法？

2 回复

可能是后端接口需要字符串格式，而前端传的是Date对象。检查下接口文档，用uni.request时把日期转成字符串再传。


在 UniApp 中，date 类型字段提交时无法直接使用 yyyy-mm-dd 格式，通常是因为以下原因及解决方案：

原因分析

  1. 数据类型不匹配：HTML5 的 <input type="date"> 在部分平台（如微信小程序）可能不被完全支持，或返回值格式为时间戳或 yyyy-MM-ddTHH:mm:ss.sssZ 格式。
  2. 表单提交处理问题：直接提交 date 类型字段时，可能因格式不符合后端接口要求导致提交失败。

解决方案

  1. 转换为字符串格式：

    • 在提交前将日期字段手动转换为 yyyy-MM-dd 格式的字符串。
    • 示例代码（使用 JavaScript）：
      // 假设 dateValue 是日期对象或时间戳
const formatDate = (date) => {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 提交前转换
const submitData = {
  dateField: formatDate(yourDateValue)
};

  2. 使用 UniApp 的 picker 组件：

    • 改用 picker 组件选择日期，并手动控制格式：
      <picker mode="date" @change="onDateChange">
  <view>选择日期: {{ selectedDate }}</view>
</picker>

      export default {
  data() {
    return {
      selectedDate: ''
    };
  },
  methods: {
    onDateChange(e) {
      this.selectedDate = e.detail.value; // 返回格式为 yyyy-MM-dd
    }
  }
};

  3. 检查后端接口：

    • 确保后端接口接受 yyyy-MM-dd 格式的字符串，而非 Date 对象。

注意事项

  • 在微信小程序中，input 的 date 类型可能受限，建议优先使用 picker 组件。
  • 提交前统一处理日期格式，避免平台差异导致的问题。

通过以上方法，可以解决日期格式提交问题。如果仍有异常，请检查网络请求或后端日志以进一步排查。

回到顶部