ElementUI的DateTimePicker组件修改时间格式

本文介绍如何使用ElementUI的dateTimePicker组件自定义日期时间显示格式。通过format属性，可以详细控制日期时间的呈现方式，如年、月、日、时、分、秒等，并提供多个示例说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景

ElementUI的dateTimePicker组件是一个日期和时间共存的选择器。

有时我们需要规定选择时的时间格式，这时就要用这个组件的format属性。

使用

 <el-form-item label="支付截止日期:" prop="finalPayTime">
              <el-date-picker
                v-model="demandBid.finalPayTime" format="yyyy-MM-dd HH:mm"
                type="datetime"
                placeholder="支付截止日期" :picker-options="pickerOptions5">
</el-date-picker>

效果

日期时间格式参照

使用format指定输入框的格式；使用value-format指定绑定值的格式。

请注意大小写

格式	含义	备注	举例
`yyyy`	年		2017
`M`	月	不补0	1
`MM`	月		01
`W`	周	仅周选择器的 `format` 可用；不补0	1
`WW`	周	仅周选择器的 `format` 可用	01
`d`	日	不补0	2
`dd`	日		02
`H`	小时	24小时制；不补0	3
`HH`	小时	24小时制	03
`h`	小时	12小时制，须和 `A` 或 `a` 使用；不补0	3
`hh`	小时	12小时制，须和 `A` 或 `a` 使用	03
`m`	分钟	不补0	4
`mm`	分钟		04
`s`	秒	不补0	5
`ss`	秒		05
`A`	AM/PM	仅 `format` 可用，大写	AM
`a`	am/pm	仅 `format` 可用，小写	am
`timestamp`	JS时间戳	仅 `value-format` 可用；组件绑定值为`number`类型	1483326245000