How to create a selection range in a form?

Question

I'm using expressionengine and safecraker to create a web form for a scheduling app that allows the user to select their desired shift time (ex: 6am to 8pm). I would like the form to know the start and end, and check all the boxes in between to fill in the range.

I was going to put a bunch of if statements to change the checkbox status, but this seems clunky. Is there a jquery tool anyone knows about to do this? Or what is the best approach, I can't seem to find any info on creating this.

I'd also like to have the form update, but not be submitted.

Thanks!

*update

I don't have any code for an example, because I'm still in the research phase. I'm not sure where to begin other then show the whole timeline for the day, and each day being a checkbox (I'll add css to look better of course). To give an example I would like it to work like travel sites. When you pick your outbound flight and return flight it would highlight all the days in between.

*Solution

In addition to Trym's example I found an example of how to impliment it HERE I think I was too stuck on it having to be incorporated with a calendar.

Answer 1

Checkboxes is not the way to go for range. Try something like this. I think it would be a much smoother experience for users, as well as writing. There's an really elaborate API and source for every example. I'm sure you'll figure it out, but I would recommend stepping away from the checkboxes.

T.