在案例展示中经常包含日期这一信息,而在不同的应用场景下对日期的格式要求也不尽相同。其实日期最终的展示结果本质上还是一个字符串,我们要做的只是把日期截取然后组合成与标准模型一致的样式,下面我们就来讲一讲如何在ivx中通过自定义函数做这种日期的格式化处理。
使用ivx实现日期格式转换的经验总结_第1张图片
1.自定义函数
在这个demo中使用了一些自定义函数,虽然ivx的案例中一般不需要写代码,但是依旧提供了代码功能。自定义函数组件可以接收和返回参数,在函数内部可以自定义对参数处理的函数,这里以“完全日期时间”这个自定义函数对函数中的代码做一个说明。

这个函数的接收参数是time,其类型为需要转化的值中“2020-04-03 09:21:17”这样一个形式的表示时间的字符串。函数中最后一行的timeL是函数的返回参数,而timel就是这个返回参数的具体值。在函数中var用来定义一个变量,我们首先创建一个名为da的变量,然后把time从字符串类型转换成一个时间类型再赋值给da。

getFullYear()、getMonth()、da.getDate()、getDay()、getHours()、getMinutes()和getSeconds()是一些函数方法,可以从时间类型变量中提取该时间变量的年、月、日、星期几、时、分和秒。需要注意的是getMonth()的返回结果是0-11,所以需要加1。而getDay()的返回结果是0-6,其中0代表星期日,所以我们建立一个数组weeks,其内部元素从星期日开始,这样返回结果就正好可以作为去数组中寻找对应值的序号。getTimezoneOffset()是返回时间类型变量与格林威治标准时间的分钟差,将返回结果除60即可转换成小时单位,添加在国际时UTC后即可正确表示当地时区。

最后就是把各个变量用加号拼接起来,赋值给返回参数即可,这里的拼接方法与数据绑定中都是一样的。
使用ivx实现日期格式转换的经验总结_第2张图片
2.组件
demo中从上到下分别是待转化时间行,在案例的前台添加了事件初始化时会填入当前时间,也可以自行输入;第二行是转换格式的选项行,这里使用了一个下拉菜单,在菜单组件中用for容器循环创建选项,作为数据来源的二维数组已经输入了各个选项的名称和标准格式;第三行负责展示各个转换格式的标准样式;最后一行则是转换结果。
使用ivx实现日期格式转换的经验总结_第3张图片
3.事件
当我们在菜单中选择选项后会根据选项的值做一个条件判断,执行对应的自定义函数,然后从自定义函数的回调中获取到函数的运算结果,赋值给对应的文本组件。
使用ivx实现日期格式转换的经验总结_第4张图片
使用ivx实现日期格式转换的经验总结_第5张图片
另外,当我们通过输入更改需转化的值的内容时,也会执行一样的动作。
使用ivx实现日期格式转换的经验总结_第6张图片
使用ivx实现日期格式转换的经验总结_第7张图片
4.系统时间
当然,ivx中其实也提供了关于时间的一些功能,选择应用系统的时间选项,也可以获取到当前时间的具体信息,前台初始化事件中就用到了这一功能。
使用ivx实现日期格式转换的经验总结_第8张图片
使用ivx实现日期格式转换的经验总结_第9张图片
另外在变量中也有一个时间变量,我们可以对其进行赋值或者获取该时间变量的相关信息。
使用ivx实现日期格式转换的经验总结_第10张图片
使用ivx实现日期格式转换的经验总结_第11张图片
使用ivx实现日期格式转换的经验总结_第12张图片