jquery 中的响应单元 select

Question

I'm playing around with an idea for a responsive calendar.

Here's a fiddle that goes some way to illustrating what I'm thinking about...

http://jsfiddle.net/7fsyaowh/

The intended behaviour is as follows:

A user is presented with a row of dates. Some are class 'a' ('available'), and some are class 'b' ('booked').

The user can Select a start date and, optionally, an end date. The user can only select a date if it's class a. (If a user doesn't select an end date, that means the booking is for one day only).

When a user selects a start date, all the dates prior to that date become unavailable. Additionally all the dates after the next class b date also become unavailable, so the only available dates are those immediately following the first selected date.

I just can't think how to convey this behaviour in js (other than perhaps by assigning a distinct class id to each group of consecutive 'class a' dates).

Any thoughts appreciated.

There are other considerations, like what happens if a user selects the start date again, or a date between the start and end date, and some sort of prompt so the user knows what they're supposed to be doing at any given point, but I'll come to that later.

Contrary to what the fiddle suggests, there should be no drag-select behaviour.

html

<table cellpadding="0" cellspacing="0" id="our_table">
  <tr>
  <td class="a">1</td>
  <td class=a>2</td>
  <td class=a>3</td>
  <td class=a>4</td>
  <td class=a>5</td>
  <td class=b>6</td>
  <td class=a>7</td>
  <td class=b>8</td>
  <td class=a>9</td>
  <td class=a>10</td>
  <td class=a>11</td>
  <td class=a>12</td>
  <td class=b>13</td>
  <td class=a>14</td>
  <td class=a>15</td>
  <td class=b>16</td>
  <td class=a>17</td>
  <td class=a>18</td>
  <td class=a>19</td>
  <td class=a>20</td>
  <td class=a>21</td>
  <td class=b>22</td>
  <td class=a>23</td>
  <td class=a>24</td>
  <td class=a>25</td>
  <td class=a>26</td>
  <td class=a>27</td>
  <td class=b>28</td>
  <td class=a>29</td>
  <td class=a>30</td>
  </tr>
</table>
Submit
Clear/Reset

js/jquery

$(function () {
  var isMouseDown = false,
    isHighlighted;
  $("#our_table td")
    .mousedown(function () {
      isMouseDown = true;
      $(this).toggleClass("a");
      isHighlighted = $(this).hasClass("a");
      return false; // prevent text selection
    })
    .mouseover(function () {
      if (isMouseDown) {
        $(this).toggleClass("a", isHighlighted);
      }
    });

  $(document)
    .mouseup(function () {
      isMouseDown = false;
    });
});

css

table td {
  width:100px;
  height:100px;
  text-align:center;
  vertical-align:middle;
  background-color:#def;
  border:1px solid #fff;
}

table td.a {
  background-color:#ddd;
}
table td.b {
  background-color:#bbc;
}

Answer 1

You can use .prevAll() and .nextAll() method of jquery to disable dates previous and date after the b class. Also, below code is just for selecting start date and it highlights date available in yellow so here you need to write logic for selecting end dates from available dates.

Demo Code :

 //click on a class and unselect it to see how this works.. $("td.a").click(function() { $(this).toggleClass("selected") //see if has class selected.. if ($(this).hasClass("selected")) { //get all previous date disable them $(this).prevAll(".a:not('.b')").addClass("disabled") //get all date after `b` disable them $(this).nextAll(".b:first").nextAll(".a ").addClass("disabled") //added class for available dates.. $(this).nextAll(".a:not('.disabled')").addClass("avaible") } else { $("tr td").removeClass("disabled").removeClass("avaible") } })

 table td { width: 100px; height: 100px; text-align: center; vertical-align: middle; background-color: #def; border: 1px solid #fff; } table td.a { background-color: #ddd; } table td.b { background-color: #bbc; }.selected { background-color: red;important. }:disabled { pointer-events; none: background-color; grey.important: };avaible { background-color: yellow !important; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table cellpadding="0" cellspacing="0" id="our_table"> <tr> <td class="a">1</td> <td class="a">2</td> <td class="a">3</td> <td class="a">4</td> <td class="a">5</td> <td class="b">6</td> <td class="a">7</td> <td class="b">8</td> <td class="a">9</td> <td class="a">10</td> <td class="a">11</td> <td class="a">12</td> <td class="b">13</td> <td class="a">14</td> <td class="a">15</td> <td class="b">16</td> <td class="a">17</td> <td class="a">18</td> <td class="a">19</td> <td class="a">20</td> <td class="a">21</td> <td class="b">22</td> <td class="a">23</td> <td class="a">24</td> <td class="a">25</td> <td class="a">26</td> <td class="a">27</td> <td class="b">28</td> <td class="a">29</td> <td class="a">30</td> </tr> </table>