element

element-ui日期选择器el-date-picker --datetime时间转换

案例:填写有效期和选择开始时间后, 自动生成结束时间

效果图如下

通过可用天数(就是 有效期) 和 可用开始时间这两个对应属性, 自动生成结束时间

结构代码

		<el-form-item label=可用天数><=form.availableDaysautocomplete=offplaceholder=请填写可用天数class=inputstyclearablemaxlength=11@input=handleStart/></el-form-item><el-form-item label=可用开始时间><el-date-pickerv-model=form.availableStartTimeplaceholder=请选择日期时间type=datetimevalue-format=yyyy-MM-dd HH:mm:ss@blur=handleStart/></el-form-item><el-form-item label=可用结束时间><el-date-pickerv-model=form.availableEndTimeplaceholder=结束日期时间disabledtype=datetimevalue-format=yyyy-MM-dd HH:mm:ss/></el-form-item>

有效期的输入框和选择开始时间时间选择器标签都绑定了同一个事件 handleStart, 目的是为了都两种场景(1.先输入有效期后选择开始时间; 2.先选择开始时间, 后输入有效期)都能触发自动生成结束时间的逻辑

以下代码可能偏长, 建议一步一步cole.log打印出来每一步的效果, 避免出现数据没拿到或者方法用错的情况

script代码- handleStart的事件代码

methods: {handleStart() {// availableStartTime为开始时间// 需要和availableDays(有效期) 进行相加// 最后生成availableEndTime(结束时间)if (this.form.availableStartTime === 		) {return	// 判断用户操作场景: 没选择就输入有效期, 如果是就退出事件}ct date = this.form.availableStartTime.split(	-	) // 开始时间拆分成字符串ct nDate = new Date(date[0]  	-	  date[1]  	-	  date[2]) // 转换为系统时间ct millSeconds = Math.abs(nDate)  (this.form.availableDays * 24 * 60 * 60 * 1000) // 系统时间绝对值 和 可用时间的值 相加ct rDate = new Date(millSeconds) // 把加好的值转成系统时间ct year = rDate.getFullYear() // 拿到系统时间的年份let month = rDate.getMonth()  1 // 系统时间的月份, 要加1let newDate = rDate.getDate() // 拿到系统时间的天数let hours = rDate.getHours() // 拿到系统时间的小时let minutes = rDate.getMinutes() // 拿到系统时间的分钟let seconds = rDate.getSeconds() // 拿到系统时间的秒if (month < 10) { // 判断如果月份小于10, 加	0	拼接month = 	0	  month}if (newDate < 10) { // 判断如果月份小于10, 加	0	拼接newDate = 	0	  newDate}if (hours < 10) { // 判断如果小于10, 加	0	拼接hours = 	0	  hours}if (minutes < 10) { // 判断如果小于10, 加	0	拼接minutes = 	0	  minutes}if (seconds < 10) { // 判断如果小于10, 加	0	拼接seconds = 	0	  seconds}this.form.availableEndTime =(year  	-	  month  	-	  newDate  	 	  hours  	:	  minutes  	:	  seconds) // 整体进行拼接}
}

代码整体比较简单, 本人主要做一个学习记录, 希望能帮到有缘人
功能是模仿别的大佬的代码实现的, 很感谢这位大佬的分享 感兴趣可以直接去给大佬点赞收藏 点进原文

=1001.2014.001.5506