element UI 时间选择器提交的时候 转换为年月日格式

### 如何将 Element UI 的时间选择器提交值转换为 `yyyy-MM-dd` 格式 在使用 Element UI 或 Element Plus 提供的时间选择器组件时，如果希望提交的日期值格式化为特定形式（如 `yyyy-MM-dd`），可以通过配置属性或自定义逻辑实现。 #### 配置方式 Element UI 和 Element Plus 的时间/日期选择器支持通过 `value-format` 属性指定返回值的格式。此属性允许开发者控制最终提交给服务器或其他部分的数据格式。以下是具体方法： 1. **设置 `format` 和 `value-format`** 使用 `<el-date-picker>` 组件时，可以同时设置两个属性： - `format`: 控制显示在输入框中的日期格式。 - `value-format`: 控制绑定值的实际格式。 如果仅设置了 `format` 而未设置 `value-format`，则默认会返回 JavaScript 的 `Date` 对象而非字符串。因此需要显式声明 `value-format="yyyy-MM-dd"` 来确保提交的是所需格式的字符串[^1]。 2. **代码示例** 下面是一个完整的 Vue.js 示例，展示了如何正确配置 `<el-date-picker>` 并将其值格式化为 `yyyy-MM-dd`: ```vue <template> <div> <el-form :model="form"> <el-form-item label="选择日期：" prop="dateValue"> <el-date-picker v-model="form.dateValue" type="date" placeholder="请选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" /> </el-form-item> </el-form> </div> </template> <script> import { reactive } from 'vue'; export default { setup() { const form = reactive({ dateValue: '', // 初始为空 }); return { form, }; }, }; </script> ``` 3. **注意事项** - 当前版本中，`value-format` 是必需的，因为如果没有它，默认行为可能不符合预期。 - 若需兼容旧版浏览器或者特殊场景下无法直接依赖框架功能，则可手动处理日期对象转字符串的过程[^2]。 4. **手动格式化日期 (备用方案)** 在某些情况下，比如动态调整格式规则或是跨平台开发环境里遇到限制时，也可以采用编程手段完成同样的目标。例如利用 JavaScript 自带的方法或将第三方库引入项目之中作为辅助工具之一。 ```javascript function formatDate(date) { const year = date.getFullYear(); let month = String(date.getMonth() + 1).padStart(2, '0'); let day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; } console.log(formatDate(new Date())); // 输出当前系统的年月日组合成的标准样式串 ``` #### 结论 为了使 Element UI 时间选择器提交的值变为 `yyyy-MM-dd` 格式的字符串，推荐优先考虑官方文档建议的方式——即合理运用 `value-format` 参数；而在必要时刻才借助额外的技术栈补充不足之处[^3]。 ---