首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue element日期组件

vue+element下日期组件momentjs转换赋值问题解决

2024-02-27 09:58:19 作者：杀猪刀-墨林

这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题，需要的朋友可以参考下

vue+element下日期组件momentjs转换赋值问题

记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题；

<el-date-picker
          v-model="form.serviceTime"
          type="date"
          class="fill-w mar-t-xs"
          value-format="yyyy-MM-dd HH:mm:ss"
          placeholder="请选择日期"
          :clearable="false"
          :editable="false"
        >
        </el-date-picker>

可以看到组件默认显示的format格式大小写是这样的，但是momentJs中format格式转换大小写与element是不一致的，这容易导致报错，所以我这里记录一下。

this.form.serviceTime = moment(this.row.serviceTime).format('YYYY-MM-DD HH:mm:ss');

可以看到年与日的大小写不一致，导致转换格式赋值的时候频频报错；

ElementUI中的el-date-picker日期选择器的格式转换问题

使用el-date-picker日期选择器选择的日期是string类型且是箭头所指的这种格式

解决方法一：

1、在这个组件后面加上这两个，可以修改格式

<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd"></el-date-picker>

2、在后端实体类上加上注解

即使前端的是string类型，但是通过json自带的格式匹配注解工具，将string转换成LocalDateTime类型

  @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
    private LocalDateTime userBirthday;

解决方法二：

用npm下载一个moment.js

1、

npm install moment --save

2、在main.js中注册

import moment from "moment";
//需要汉化
moment.locale('zh-cn');
Vue.prototype.$moment = moment;//赋值使用

let date = new Date(moment(this.userInfo.userBirthday).format('YYYY-MM-DD HH:mm:ss'));

到此这篇关于vue+element下日期组件momentjs转换赋值问题的文章就介绍到这了,更多相关vue element日期组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

vue+element下日期组件momentjs转换赋值问题解决