el-date-picker 传参数据为格式化字符串
时间: 2025-01-02 22:40:18 浏览: 98
### 将格式化字符串作为参数传递给 `el-date-picker` 组件
在 Vue.js 中使用 Element UI 的 `el-date-picker` 组件时,可以通过设置属性来指定日期的选择范围以及所期望的输出格式。为了使 `el-date-picker` 返回特定格式化的字符串而不是默认的 Date 对象,应当利用其提供的 `value-format` 属性[^1]。
此属性允许开发者定义当用户选择了一个日期之后,组件应该按照何种格式返回这个日期值。例如:
```html
<template>
<div id="app">
<!-- 使用 value-format 来规定 el-date-picker 输出的具体格式 -->
<el-date-picker v-model="selectedDate" type="date" placeholder="Pick a day"
:picker-options="pickerOptions" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
<p>Selected date is: {{ selectedDate }}</p>
</div>
</template>
<script>
export default {
data() {
return {
selectedDate: '',
pickerOptions: {}
};
}
};
</script>
```
上述代码片段中的 `format` 和 `value-format` 是两个不同的选项。前者影响日历面板内的展示样式;后者则决定了最终赋值给绑定变量的数据形式——这里被设定成了 "yyyy-MM-dd"。
通过这种方式,在模板内可以直接获得已经过适当处理过的字符串表示法,而无需再额外编写逻辑来进行转换操作。
阅读全文
相关推荐


















