Custom timepicker with jQuery and bootstrap

Question

I build a custom timepicker with jQuery and bootstrap. It's almost finished, but 1 "nice to have detail" is missing and I'm stucked getting to the result.

It should follow this rules:

Select the time on click
Only related times are possible to select.
Only 1 time range at once is possible (e.g. 09:00-11:00 works but can't pick another time range)
Disabled times are not possible to pick and if they are between a possible time range, only the range before or after disabled are allowed.
It should be possible to click the start time and the end time and if there are no obstacles in between, the times between should be selected as well.

1-4 are working but I'm stucked on point 5.

So what I want to achieve is that if I click on 13:00-14:00 and 15:00-16:00, 14:00-15:00 should be selected automatically if allowed by above rules.

    $('.time-cal .time-btn').on('click',function(){
        if($('.time-cal .time-btn.btn-success').length == 0)
        {
            $(this).not(".btn-danger").toggleClass('btn-success');
            $(this).not(".btn-danger").toggleClass('btn-light');
        }else{
            if($(this).hasClass('btn-light'))
            {
                if($(this).next().hasClass('btn-success') || $(this).prev().hasClass('btn-success'))
                {
                    $(this).not(".btn-danger").toggleClass('btn-success');
                    $(this).not(".btn-danger").toggleClass('btn-light');
                }
            }else{
                let next = $(this).next();
                let prev = $(this).prev();
                
                if(!next.hasClass('btn-success') || ! prev.hasClass('btn-success'))
                {
                    $(this).not(".btn-danger").toggleClass('btn-success');
                    $(this).not(".btn-danger").toggleClass('btn-light');
                }
            }
        }
    });




                                Pick times

Me.Name · Accepted Answer

-edit altered behaviour based on the comments. At startup each time'button' is divided into a specific timeblock so buttons in the same timeblock can be quickly handled together (there might be some additional/other behavioral requirements when reselecting)

const 
        disabledClass = 'btn-danger',
    selectedClass = 'btn-success',
    notselectedClass = 'btn-light',        
    timeButtons = $('.time-cal .time-btn'),
    enabledButtons = timeButtons.not('.' + disabledClass ),
    timeBlocks = [];    
    
    timeButtons.each((index,btn)=>{btn.enabled=!$(btn).hasClass(disabledClass); 
        if(btn.enabled){
        if(index===0 || !timeButtons[index-1].enabled){         
          timeBlocks.push([]); //new timeblock
        }
        btn.timeBlock = timeBlocks[timeBlocks.length-1];
        btn.timeBlock.push(btn);
      }
      prevEnabled = btn.enabled;
        btn.index = index;btn.selected=false;       
      btn.setSelected = sel => {if(btn.selected===sel)return; btn.selected=sel;
            $(btn).toggleClass(notselectedClass,!sel).toggleClass(selectedClass,sel);}
      });
    

         
enabledButtons.click(function(){          
         if(this.selected){
                //deselect and make sure times in this block after this button are deselected too
                        this.timeBlock.filter(btn=>btn.index >= this.index && btn.selected).forEach(btn=>btn.setSelected(false));
            return;
         }
                
        //deselect other timeblocks
        enabledButtons.toArray().filter(b=>b.timeBlock !== this.timeBlock).forEach(b=>b.setSelected(false));
        
        //check if there are other selected
        const selected = this.timeBlock.filter(b=>b.selected);
        if(selected.length === 0)
          this.setSelected(true); //no other buttons selected, simply select
        else{
          //select range withint the timeblock
          let from = selected[0].index, to = this.index;
          if(from > to)
            [from,to] = [to,from];
          for(let i = from;i<=to;i++)
            timeButtons[i].setSelected(true);
        }       
        
    });




                                Pick times

Custom timepicker with jQuery and bootstrap

Answers (1)

Related Questions