el-date-picker 控制可选日期范围 时间选择只显示小时 并控制小时可选范围

现在 需要做一个 时间选择器  ，可以根据 小时（同时选天和小时） 和天 和月，节假日等类型控制日历的选择样式

解决  根据上面的类型切换 type 为 datetime，date，和month来解决显示问题，

功能点1.

重大节假日 就是只有节假日可选 type 为 date  控制可以选择的具体日期（例如五一 是5.1-5.5 5天可选）

功能点2.

小时 需求是  时间选择器 可以同时选择日期 和时间，只可以选择小时并且 分和秒 不显示

解决功能点1

理解disabledDate 设置值  为不可以选的时间

重大节假日需要后台 或者你自己写好可以选择的日期， obj里面的data为可选日期集合  dayjs(date).format("YYYYMMDD")只是对日期就行格式化方便对比 是否包含

效果

  

用该方式 解决了 控制日期可选范围问题

解决功能点2

先看一下 el-date-picker   因为要同时出现日期和时间选择 所以type选择"datetime"   看一下默认样式

设置format 为  yyyy-MM-dd  此时 时间 会显示到分钟可选 没有了 秒

这里还需要 把分钟可选去掉，尝试很多设置方式没有解决，最终解决是通过隐藏 分钟模块控件

这样解决了 只显示到小时  的需求 效果如下

现在还有一个问题 就是 控制今天 现在小时之后的 小时不可选 

这样解决了当前之后的小时不可选  但是这时候引发了新的问题    例如今天10月2号 14点  那么 15,16等以后不能选是正确的   当你选择到其他日期 例如 10月1 日   应该是所有 小时可选  但是现在的话  也是不能选的

这时候需要动态的控制  上图中 selectableRange 的值 ，但是这里有格式要求不能动态用this.xxxx来设置或者不生效

所以  写了两个  expireTimeOption

根据用户选择的是否为当天  来切换 选择范围。 从而解决了该问题

这样解决了  时间选择显示到小时  ，并且可以控制小时显示范围的问题，

效果图