前端新手的学习之路 - 1
这个功能应该经常会遇到，需要一个可以选择时间日期的窗口，而服务器/数据库的时间和本地时间是不同的时区。我在这个功能上浪费了三个小时，所以来记录一下，希望下次遇到只需要很短的时间就可以解决。
经验教训：
1：仔细阅读官方文档，会更加节约时间，有些细节可能不是那么容易注意到
2：搜到的stack overflow的答案，要多去思考为什么这样做，答案对你来说不一定是对的，但可能给你启发
3：要知道当地时间和服务器时间，以及数据库时间是可能不一样的
案例：
我们需要一个可以选择时间和日期的窗口，可能很容易想到是input type datetime，然而并不work，搜了一下才发现，原来这个已经不被推荐使用了，我们应该用datetime-local。Mozilla链接如下。
这个input type可以让用户选择日期，时间，包括了年月日以及小时分钟。这个input用于前端，显示当地时间时区。
（1）: 需要注意的是：
显示的时间的格式和真正的值的格式是不同的。日期时间的值的格式是YYYY-MM-DDThh:mm 是24h制。前端显示的是12h制。
比如：
我们选一个日期时间，07/30/2021 09:00 am 如下图
然后又把时间换成07/30/2021 09:00 pm
在后端我们得到的结果如下：
我们得到的值实际上是24h 格式的，而前端显示的是12小时制的加上am/pm。这就要求我们在把后端数据传到前端时，要做一下转换，才能显示正确的时间。
（2）：数据库的时区
首先，查看你的数据库的时区是否是utc。
通过API call得到的时间是UTC 时间, ‘Z’ 就说明了是UTC 时间，数据库的时间是24小时制，此时需要转换成本地24小时制的时间。
在前端，通过API call后，用moment对开始时间做formatting，如下图：
第一个时间是API call直接拿到的数据，第二个是formatting后的数据。
hh表示的是12小时制，HH是24小时制，要注意细节。
（3）： 要注意的是，这个功能很多的浏览器不接受，最好还是选择用框架或者第三方的library来做这个，或者可以选择把日期和时间分开。
这个虽然看起来很简单，但是在对很多知识并不熟悉的情况下，还是浪费了很多时间到处查，重要的是理解每一个东西代表了什么意思，我们要解决的唯一一个问题就是在使用input type datetime-local时，如何把后端得到的数据正确显示在前端，简而言之就是
moment(this.date-time-data).format(“YYYY-MM-DDTHH:mm”)
