2

I'm trying to make an hour selection for a day. In some cases, there are already reservations for this day.

<ol id="selectable">
    <li id="1" class="ui-widget-content">7:00</li>
    <li id="1" class="ui-widget-content">8:00</li>
    <li id="1" class="ui-widget-content">9:00</li>
    <li id="1" class="ui-widget-content">10:00</li>
    <li id="1" class="ui-widget-content">11:00</li>
    <li id="1" class="ui-widget-content">12:00</li>
    <li id="1" class="blocked">reserved</li>
    <li id="1" class="blocked">reserved</li>
    <li id="1" class="ui-widget-content">3:00</li>
</ol>

I already used a filter for blocked elements but it's still possible to continue selecting after a blocked element. The result would be an invalid reserveration because the reservations are overlapping.

For my example above: The item is already reserved between 1 and 2 PM, But I can still select from 11 AM to 3 PM.

I need something that stops (disables) the selection after passing a blocked element. For my example the result should be 11–12 o'clock.

Antti29
  • 2,953
  • 12
  • 34
  • 36
user2735223
  • 21
  • 2
  • At the moment I'm doing the same thing. And I use datetime picker plugin http://trentrichardson.com/examples/timepicker/. There are lots of options, In my scenario I validate the reservation button in a javascript function. Hope it helps you – Cristian E. Aug 31 '13 at 09:40
  • Hy Christian - I need to use some kind of table because I need to show the reserved times. – user2735223 Sep 03 '13 at 06:05

2 Answers2

2

You need to set the cancel selector as mentioned in the API:

$("#selectable").selectable({
   cancel: ".blocked"
});

Link to the API Doc: http://api.jqueryui.com/selectable/

See this JSFiddle:

http://jsfiddle.net/Sd8VJ/

konp
  • 33
  • 4
  • 2
    Thank you, but "cancel" only disallows to start ah selection on thi element - I need something that stops (disables) the selection if you try to select a blocked element. – user2735223 Aug 31 '13 at 11:24
0

I solved it using the jQuery hover event but I think it's a little dirty:

   $("#selectable .blocked").hover(function() {
      $( "#selectable" ).selectable( "disable" );
    });
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
user2735223
  • 21
  • 2