基于element-ui实现未知类型的时间选择器（解决过程及最终理论效果）

近期入职的公司，主要做web后台和小程序开发。

web后台开发时，有个需求：用户希望选择时间的时候添加一些未知选项，比方说，我记得一件事，发生在2021年7月的上午9点30，但忘了具体是哪天了，我就可以选上年、月、时、分等还记得的时间，日以UK（unknown）表示，这样就能形成一个未知的时间 2021-07-UK 09:30，时间未知从月开始，均可选择未知。（说的还算有道理）

OK，需求大体这样，那就开始做

一开始，先看了下已有的组件，大体调研了几个，没有现成的...那就只能自己手动封装了。

因为项目是基于vue + element-ui进行开发的，因此时间选择器就以element-ui的date-picker为二次封装原点开始封装吧。

首先先扒出源码，因为要进行封装，总不至于在依赖里面直接改吧QAQ

扒出源码之后，看了下，这个时间选择器很严谨，内部组件传值全部以Date格式进行传递，组件还比较多（内心OS： 多恶心啊），第一反应：换一个，找个内部传值不是以date格式进行传递的不就得了，后来一想，直接用这个吧，也省的引入插件了（其实是没找到更好的替代品QAQ）

因为element-ui的时间选择器代码比较严谨，在做新型时间选择器的过程中，曾经尝试过打破内部的date传值的总传值风格，但最终失败了，而且是必败！！！作为一个成熟UI框架的时间选择器，选择的值就应该是date类型，肯定不能有别的类型，在一边骂这框架垃圾（不能完成咱的特定功能）的同时，也在佩服element-ui的开发者的严谨性，毕竟，所谓时间选择器，你要是能选出个非时间格式出来，那肯定是有问题的。（这又跟咱的开发相悖，头疼）

仔细想想这个事，貌似也没那么复杂，他的内部传值，传的是时间格式，但输出的可是‘年-月-日 时:分:秒‘啊，这是啥，这是字符串啊！！！豁然开朗，那就是在选择时间的时候，内部传值不变，在点击选中未知的时候，做一个标记，在最后转成字符串的时候，再转换成unknown不就完了么，相当于只需要截住date和string互相转换的时候就行，仔细想想，多low啊，但同时，这个问题倒确实是解决了。

思路大体就这样，就着以上思路来设计 ---- 举个例子：在选择UK日的时候，将‘日’字段的判断值改为TRUE，在date格式转换成字符串之后，根据这些判断值，继续对字符串进行处理，将转成的字符串中的‘日’对应的值改为UK返回出去，OK了，主流程完成；回显那就倒过来走，将字符串中带有UK的时间对应的字段改为01，对应的判断值设成TRUE，然后转成date格式，进行传递，OK，回显流程也完毕，剩下的细节，像精确到时分秒还是啥的，跟以前一样就好

当然问题也很明显，时间选择器选择的时间在内部传递是date格式，在选择未知后，页面上显示的还是选中的时间，仅仅是选择框内展示的值是想要的，我做的就仅仅是‘掐头去尾’，并没有从根本上改变时间选择器，因此使用效果并不是很好，有玩过类似需求/功能的大佬可以一起交流交流。