看完就懂的编辑页面如何巧妙处理时间

需求分析

分析：
我们通常会遇到这种情况，当我们制作一个表单页面的时候，通常会有添加和编辑的情况，我们在提交的时候还需要将时间的格式转换为字符串格式进行传参。

在这里我们使用的是 iview 中的 DatePicker type格式为datetime可选择日期和时间
在这里插入图片描述

添加页面

在添加页面中相对简单很多因为插件具有 @on-change 时间时间的参数就是当前选中的时间字符串格式的所以我们只需要在这个事件中赋值即可
在这里插入图片描述
首先我们进行了双向绑定然后绑定事件

在这里插入图片描述

在事件中我们只需要将time参数传递给对应变量即可下图查看效果

在这里插入图片描述

当我们选择对应时间的时候输出的time为字符串格式的时间所以我们的赋值也搞定了
下面来看一个麻烦的编辑页面

编辑页面

上面的添加页面很简单我们只需要通过 change 事件进行赋值即可但是在编辑页面中我们跳转到编辑页面然后获取详情并绑定到时间插件上面这时候我们不对时间进行选择也就不触发change事件了所以当我们提交的时候看一下输出
在这里插入图片描述

在这里插入图片描述
通过获取详情已经复制给了日期插件并没有触发change事件我们点击确定按钮输出的是实践对象但是如果用户进来更改了时间进而触发change事件后时间格式又成为了字符串所以我们再次需要判断是否为字符串类型的格式在选择性的进行格式化

推荐以下

在这里插入图片描述

export function parseTime(time, cFormat) {if (arguments.length === 0) {return null}const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'let dateif (typeof time === 'object') {date = time} else {if (('' + time).length === 10) time = parseInt(time) * 1000date = new Date(time)}const formatObj = {y: date.getFullYear(),m: date.getMonth() + 1,d: date.getDate(),h: date.getHours(),i: date.getMinutes(),s: date.getSeconds(),a: date.getDay()}const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {let value = formatObj[key]if (key === 'a') return ['一', '二', '三', '四', '五', '六', '日'][value - 1]if (result.length > 0 && value < 10) {value = '0' + value}return value || 0})return time_str}