elementui shortdate
ElementUI 短日期格式设置
ElementUI 的日期选择器(DatePicker)组件支持自定义日期格式,可以通过 format 和 value-format 属性实现短日期(如 YYYY-MM-DD)的显示和绑定。
基本用法
在日期选择器中设置 format 控制显示格式,value-format 控制绑定值的格式:
<el-date-picker
v-model="date"
type="date"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
placeholder="选择日期">
</el-date-picker>
日期类型说明
YYYY:四位年份(如 2023)MM:两位月份(01-12)DD:两位日期(01-31)- 其他格式如
YY(两位年份)、M(非零填充月份)也可根据需求使用
后端数据对接
若需与后端交互,确保 value-format 与后端要求的格式一致。例如返回时间戳:
<el-date-picker
value-format="timestamp"
v-model="timestampDate">
</el-date-picker>
国际化支持
通过全局配置可修改默认的日期语言和格式:
import { ElDatePicker } from 'element-plus'
import locale from 'element-plus/lib/locale/lang/zh-cn'
app.use(ElDatePicker, { locale })
注意事项
- 旧版 ElementUI(Vue 2)属性名为
format和value-format,Element Plus(Vue 3)保持一致。 - 移动端使用时建议保持默认格式以避免输入兼容性问题。







