需求场景
客户需要查询上一个月的新增客户的功能。
后端：
这个好办，客户的注册日期的字段类型是datetime的，传给我一个范围就可以，比如这样：2021-01-01、2021-01-31，这样我就可以查询某个月份的数据了。前端：
好办，UI库的日期控件提供了这个功能很简单。客户：
这个，功能是实现了，但是我要查一个月份的，你们做的为啥是这样？
为啥让我先选一号，然后再去选31号？太麻烦了，你们能不能做出这样：
直接选月份不香吗？
前端
我改好了。后端
为了提高查询效率，我们增加了一个int类型的字段，里面放 202101、202102这样的数据，这样前端只需要提供年月（202101）的数据就可以了。前端
不早说。。。。。。
讨论
这个怎么办？似乎要做个转换，前端日期控件给的类型一般都是标准的date，那么怎么表达月份？或者这个需求其实要的是起始日期和结束日期，这又要怎么转换？
如果要做转换的话，那么是前端做还是后端做？
听说因为这些事情，前后端经常吵架。。。
这还只是按月查询，那么有没有按年查询的需求呢？
我一朋友和我说，后端不爱转的话，那么就前端转呗，有啥的。
当然也可以换过来说，前端不爱转的话，那么后端转呗，有啥的。
好吧，还是说点有用的，这种麻烦事前后端都不爱做，烦。这是人之常情，谁又愿意给自己找活干呢？
但是总是要做呀，不做的话，客户用的不方便。
封装个控件来解决麻烦
先总结一下各方的需求。
后端
日期的类型一般是datetime，当然也可能是date或者时间戳，或者是int、char的形式，不管用哪种都需要罗列一下。前端
现在UI库的日期控件都会提供各种形式，以前只是简单的年月日的形式，现在多了年、年月、年周、范围查询等方式，既然提供了就要利用起来不能浪费吧。客户
“我不管你们是啥类型，也不管用的啥UI库，总之，越方便越好，其他我不关心。”-
总结：
0012查询日期的分析.png
解决方案
- 后端需要的格式：
首先归纳一下后端需要的数据格式，我们可以通过format来实现。
switch (props.submitFormat) {
case 'date': // 提交标准的日期形式
re1 = findText.value[0]
re2 = findText.value[1]
break
case 'timestamp': // 提交时间戳
re1 = findText.value[0].valueOf()
re2 = findText.value[1].valueOf()
break
default: // 通过format实现后端需要日期格式，比如 2021-01-01等
re1 = dateFormat(findText.value[0]).format(props.submitFormat)
console.log('提交日期', re1)
re2 = dateFormat(findText.value[1]).format(props.submitFormat)
console.log('提交日期', re2)
break
}
直接使用 dayjs 来实现格式化，https://day.js.org/docs/zh-CN/display/format 。因为element-plus用的就是这个，我们就不引入其他库了，
-
前端的日期控件的显示形式
然后是控件的显示形式，我们再增加一个选项，可以选择各种日期形式
0013选择日期形式.png
这样就可以非常灵活了。按月查、按年查，设置开始结束都可以。
- 数据调整
只是做到这些，还差了一点点，因为用户选择 2021-01的话，其实后端需要的是 2021-01-01 到 2021-01-31（或者是 2021-02-01）。
也就是说要把用户选择的一个日期，改成一个范围日期。还需要做点判断和转换才可以。
