使用ivx实现日期格式转换的经验总结

Posted 2020-11-27

在案例展示中经常包含日期这一信息，而在不同的应用场景下对日期的格式要求也不尽相同。其实日期最终的展示结果本质上还是一个字符串，我们要做的只是把日期截取然后组合成与标准模型一致的样式，下面我们就来讲一讲如何在ivx中通过自定义函数做这种日期的格式化处理。

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后即可正确表示当地时区。

最后就是把各个变量用加号拼接起来，赋值给返回参数即可，这里的拼接方法与数据绑定中都是一样的。

2.组件
demo中从上到下分别是待转化时间行，在案例的前台添加了事件初始化时会填入当前时间，也可以自行输入；第二行是转换格式的选项行，这里使用了一个下拉菜单，在菜单组件中用for容器循环创建选项，作为数据来源的二维数组已经输入了各个选项的名称和标准格式；第三行负责展示各个转换格式的标准样式；最后一行则是转换结果。

3.事件
当我们在菜单中选择选项后会根据选项的值做一个条件判断，执行对应的自定义函数，然后从自定义函数的回调中获取到函数的运算结果，赋值给对应的文本组件。


另外，当我们通过输入更改需转化的值的内容时，也会执行一样的动作。


4.系统时间
当然，ivx中其实也提供了关于时间的一些功能，选择应用系统的时间选项，也可以获取到当前时间的具体信息，前台初始化事件中就用到了这一功能。


另外在变量中也有一个时间变量，我们可以对其进行赋值或者获取该时间变量的相关信息。