记录一下仿钉钉会议预约的时间选择

87 阅读2分钟

dingding.png dingding选择时间框逻辑如下

1.时间列表是当天的时间区间,例如08:00-08:30,每半小时为一个步长,从08:00-08:30 到 17:30-18:00

2.如果当前的时间超过了列表中的时间,则为过期时间,列表禁用该项无法被选择

3.可进行连续选择,如 第一次点击第4项,第二次点击第8项,则4-8期间的所有项都被选中,比如第一次点击的是 09:00-09:30 ,第二次点击 11:00-11:30 ,效果显示为 期间的时间都被连续选中 09:00-09:30 09:30-10:00 10:00-10:30 10:30-11:00 11:00-11.30,

4.时间增加 :当效果为连续时间时,如 15:30-16:00 到 17:00-17:30 共四项 如果点击14:30 - 15:00 ,则连续选择的时间从14:30-15:00起始, 17:00-17:30 结束 ;如果点击后面的 效果亦然

5.时间减少: 当效果为连续时间时,如 15:30-16:00 到 17:00-17:30 共四项,如果点击其中的第二项(16:00-16:30),则取消前两项,最终效果为 起始时间16:30-17:00 结束时间为 17:00-17:30,反之亦然

6.特别注意! 当所选项为3项,例如 15:30-16:00 16:00-16:30 16:30-17:00 时,点击第二项(16:00-16:30),则取消后两项,只剩下第一项(15:30-16:00)

7.如果每次点击都是连续的项,则该项被选中

8.如果进行了以上操作, 发现所选项中有不可选择的项,例如 过期时间 或被别人预约的项,则取消所有选择的项并进行提示

9.选项完成后 将起始时间和结束时间呈现在 已选择时间内 上代码 看效果

xiaoguo.png