Vue组件编辑数据时如何显示date类型输入框的值？

这个问题其实很常见，根源在于HTML原生的date类型输入框只接受严格的YYYY-MM-DD格式字符串，而你的"创建时间"数据大概率不是这个格式——可能是Date对象、带时分秒的ISO字符串（比如2024-05-20T14:30:00），或者其他非标准日期格式，导致输入框无法解析并显示。

下面给你两种可行的解决方案，按需选择：

方案一：在父组件传递值时提前转换格式 #

如果你的父组件里持有原始的日期数据（比如Date对象或带时间的字符串），可以先把它转换成YYYY-MM-DD格式再传递给form-input组件。

示例代码：

<template>
  <div>
    <!-- 总销量输入框（正常工作） -->
    <form-input label="总销量（total sold）" type="text" :value="totalSold" />
    
    <!-- 创建时间输入框（转换格式后传递） -->
    <form-input label="创建时间（created at）" type="date" :value="formattedCreatedAt" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalSold: 46,
      createdAt: new Date('2024-05-20T09:15:00') // 假设是后端返回的带时间的日期对象
    };
  },
  computed: {
    formattedCreatedAt() {
      if (!this.createdAt) return '';
      const date = new Date(this.createdAt);
      // 处理无效日期的边界情况
      if (isNaN(date.getTime())) return '';
      // 拼接成YYYY-MM-DD格式
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，要+1并补0
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

方案二：在form-input组件内部自动处理格式 #

为了让组件复用性更强，可以在form-input组件里根据type判断，如果是date类型，就自动对传入的value进行格式转换，这样父组件不用每次都手动处理。

修改后的form-input组件代码：

<template>
  <div class="form-input-item">
    <label>{{ label }}</label>
    <input
      :type="type"
      :value="processedValue"
      @input="$emit('input', $event.target.value)"
      :placeholder="placeholder"
    />
  </div>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'text'
    },
    value: {
      type: [String, Date, Number], // 支持多种类型的日期输入
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  computed: {
    processedValue() {
      // 仅对date类型输入做格式处理
      if (this.type !== 'date') return this.value;
      
      if (!this.value) return '';
      const date = new Date(this.value);
      // 校验日期有效性
      if (isNaN(date.getTime())) return '';
      
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  }
};
</script>

额外注意事项 #

1. 提交数据的格式：原生date输入框触发input事件时，返回的也是YYYY-MM-DD格式字符串，所以你提交给后端时可以直接用这个值，或者根据后端需求再转换。
2. 无效日期处理：一定要加isNaN(date.getTime())的判断，避免传入无效日期（比如字符串'2024/05/20'虽然能转成Date，但如果是完全错误的字符串会变成Invalid Date，导致输入框显示异常）。
3. 时间戳的情况：如果你的日期数据是时间戳（比如1716182400000），上面的代码也能处理，因为new Date(时间戳)会正确转换为Date对象。

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