在vue中使用到DateTimePicker日期时间选择器进行日期时间(yyyy-MM-dd HH:mm:ss)的显示和增删改
在这里插入图片描述
在后端实体类中的日期格式:

	@JsonFormat(shape = JsonFormat.Shape.STRING, pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
	private Date endtime;

前端的控件:

    <el-date-picker
      v-model="dataForm.endtime"
      type="datetime"
      placeholder="选择结束时间">
    </el-date-picker>

刚开始,显示的时间格式为yyyy-MM-dd 00:00:00,无论怎么样改变,显示的永远只是日期,具体时间则显示不了。同时在保存或编辑该日期时,对时间进行改动都会报错。也在网上找了很多解决方法,最终在官方文档中发现:
DateTimePicker日期时间选择器的value-format参数,可以选定绑定的日期格式。不指定则绑定格式时,默认绑定格式为Date(yyyy-mm-dd)。所以给DateTimePicker日期时间选择器添加value-format参数即可:

    <el-date-picker
      v-model="dataForm.endtime"
      type="datetime"
      value-format="yyyy-MM-dd HH:mm:ss"
      placeholder="选择结束时间">
    </el-date-picker>

能完整的显示日期和时间,且能修改到具体的时间。

Logo

前往低代码交流专区

更多推荐