element-ui 时间选择器格式化

最新推荐文章于 2024-03-21 14:24:47 发布

原创最新推荐文章于 2024-03-21 14:24:47 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍如何使用Element UI的日期选择器组件，并通过moment.js插件将选择的日期范围转换为YYYY-MM-DD HH:mm:ss格式。首先安装并全局引入moment.js，然后在组件中实现日期变化时的格式化。

在这里插入图片描述

	<el-date-picker
       v-model="form.dateTime"
       type="datetimerange"
       range-separator="至"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
       @change="changeDateTime"
     >

	changeDateTime(date){
	  console.log(date)
    },

console.log出来的date值是：
在这里插入图片描述
但是这不是我想要的格式，办法来啦！！！！

1.安装格式化插件

npm install moment --save

2.全局引入

	// 日期格式化
	import Moment from 'moment'
	//全局挂载
	Vue.prototype.moment = Moment

3.页面应用

	changeDateTime(date){
      this.form.startTime = this.moment(date[0]).format("YYYY-MM-DD HH:mm:ss")
      this.form.endTime = this.moment(date[1]).format("YYYY-MM-DD HH:mm:ss")
    },
``