element-ui日期组件使用总结

最近一直在使用element-ui中的日期组件。因此，我想对日期组件的常用功能做一个简单的总结。主要包括处理日期组件选择时的面板联动问题以及限制时间范围。

解除两个日期面板之间的联动

最近发现两个日期面板之间存在联动关系。开始时间面板和结束时间面板始终只能相邻，不能出现开始时间选择3月，结束时间选择5月这样的情况。然而，有时候我们需要解除它们之间的联动关系。这时我们可以通过设置unlink-panels为true来取消两个日期面板之间的联动。

unlink-panels: 在范围选择器里取消两个日期面板之间的联动。默认情况下是false，我们可以将其设置为true。

限制-选择今天以及今天之后的时间

在模板中，我们可以通过设置pickerOptions来限制日期的选择范围。通过disabledDate函数，我们可以使时间选择仅限于今天以及今天之后的时间。

8.64e7 约等于24小时

有的小伙伴可能会遇到限制时间是使用8.64e7的情况。实际上，8.64e7约等于24小时，因此并不会对限制产生影响。

限制-只能选择今天之后的时间

在pickerOptions中，我们可以通过disabledDate函数限制时间的选择范围，使其仅能选择今天之后的时间。

限制-选择今天以及今天之前的时间

通过设置pickerOptions中的disabledDate函数，我们可以限制时间的选择范围为今天以及今天之前的时间。

限制-选择今天之前的时间

通过设置pickerOptions中的disabledDate函数，我们可以限制时间的选择范围为今天之前的时间。

限制-选择当前时间以及当前之前的7天的时间

通过设置pickerOptions中的disabledDate函数，我们可以限制时间的选择范围为当前时间以及当前之前的7天的时间。

限制-时间不能超过当前时间,时间跨度不能超过30天

通过设置pickerOptions中的disabledDate函数和change事件，我们可以限制时间的选择范围为不超过当前时间，并且时间跨度不能超过30天。

发现问题

尽管我们实现了功能，但用户体验并不理想。我们希望用户选择了5月2号时，只能选择它的前30天和后30天范围的时间（4月2号至6月20号）。为了解决这个问题，我们需要解决面板联动、获取用户点击选择的时间以及计算出30天前和30天后的时间。

选择的时间范围不超过7天

通过设置pickerOptions中的disabledDate函数和onPick事件，我们可以限制时间的选择范围不超过7天，并且选择的时间不能选择今天之后的时间。

又又发现了问题

尽管我们友好地实现了限制选择的时间前后不超过7天，但没有限制选择的时间不能选择今天之后的时间。因此，我们需要进一步限制选择的时间范围。

选择的时间范围不超过7天，同时选择的时间不能选择今天之后的时间

通过设置pickerOptions中的disabledDate函数，我们可以限制选择的时间范围不超过7天，并且选择的时间不能选择今天之后的时间。

尾声

没有想到五一这么快就结束了。用了2天时间看完了遮天。主角是古今第一圣体，荒古圣体。我是牛马圣体。不说了，开始干活。