时间选择器-首次打开选择当前时间

功能需求

时间选择器首次加载时，选择当前时间，同时在每次切换时间时发出对应时间的回调。

意外情况

const p = n => n > 9 ? n : '0' + n;

const date = new Date();

const YYYY = date.getFullYear();
const MM = p(date.getMonth() + 1);
const dd = p(date.getDate());

const HH = p(date.getHours());
const mm = p(date.getMinutes());
const ss = p(date.getSeconds());

const value = `${YYYY}-${MM}-${dd} ${HH}:${mm}:${ss}`;

return [{
  ...data[0],
  value,
}];

如果直接在数据过滤器中计算当前时间，并且添加了回调参数。那么在后续手动选择时间的时候会发现，无论怎么选择，时间都会变成选择那一瞬间的时间。

这是由于回调参数的特殊性 —— 发出回调时会触发数据过滤器执行导致的。

在部分组件中，如果其回调的发出是基于自身数据过滤器动态变化的，就有可能会进入死循环卡死（返回时间戳、随机数等情况时）。

在这种情况下，动态生成的部分需要转移到另外的地方，通过回调来获取，避免死循环。

处理方式

将动态生成数据的部分转移到其他组件中，如数据容器，具体实现如下。

数据容器

进行时间计算（注：其实数据容器中也存在回调会再次触发自身数据过滤器执行的问题，因为格式化的时间是到秒的，再次执行后数据未发生变化，故不会再次循环），并发出当前时间的回调。

时间选择器

接收数据容器发出的回调，并设为 value 对应值。

Demo