[日期选择器] hover-的相关处理

98 阅读1分钟

image

  1. hover 到某个日期 hoverDate, 则需要显示如上图的范围 in-range,通过下面规则判定:

    hoverStart =< cellDate <= hoverStart ||  Start <= cellDate <= End
    
  2. 因为只点击了一次(第一次点击的值,默认作为 Start),Start 是确定的: 2018-01-10,但 End 是不确定的,因此 Start <= cellDate <= End 该规则不适应(此时还不确定 End 是谁)

  3. 需要通过:hoverStart =< cellDate <= hoverStart 来判定,因此,需要判定 hoverStart 和 hoverEnd。这个就比较直观了:

    1. 如果 hoverDate(2018-01-18) > Start,如下图, 则 hoverEnd = hoverDate, hoverStart = Start,这样从 Start -> HoverDate 之间的范围就是选中的范围了

    image

    1. 如果 hoverEnd(2018-01-02) < Start, 则说明,刚才第一次点击的单元格(Start),用户是想将其作为 End。因此,如下图,鼠标悬浮到 2号,这时候,hoverStart = hoverDate, hoverEnd = Start,此时:hoverDate -> Start 之间的数据,就是选中的范围了

    image