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

解决  根据上面的类型切换 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

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

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

效果图

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐