英文:
Jquery select multiple date ranges in HTML Calendar
问题
我使用一个HTML日历，可以选择多个日期范围。如何防止时间段重叠？
-
第一次点击选择第一天
-
第二次点击选择范围（必须在第一次点击之后）
-
第三次点击选择下一个第一天
-
第四次点击选择下一个范围
我的想法是通过index()来实现，但我不知道如何做...
我很高兴听到提示和帮助。我无法自行继续下去。
$("td.day").click(function() {
if ($("td.firstClick").length == 0 && $(this).hasClass("reserved") == false) {
$(this).addClass("firstClick");
}
if ($("td.firstClick").length > 0 && $(this).hasClass("firstClick") == false) {
var tds = $("td.day");
var firstClick = $(".firstClick");
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);
tds.filter(function() {
var idx = tds.index(this);
return idx > firstClickIndex && idx < currentIndex;
}).addClass("reserved");
$(".firstClick").addClass("checkin").removeClass("firstClick");
$(this).addClass("checkout");
}
});
table {
border-collapse: collapse;
}
table tr td {
width: 14%;
}
table tr td:hover {
cursor: pointer;
}
.firstClick {
background: green;
}
.checkin {
background: yellow;
}
.checkout {
background: red;
}
.reserved {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td colspan="7"><b>2016</b></td>
</tr>
<tr>
<td colspan="7"><i>November</i></td>
</tr>
<tr>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
<th>sun</th>
</tr>
<tr>
<td></td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
</tr>
<!-- 这里省略了其他日期 -->
</table>
英文:
I use an HTML calendar where I can select multiple date ranges. How can I prevent time periods from overlap?
-
First click select first day
-
Second click select range (must be AFTER the first click day)
-
Third click select next first day
-
Fourth click select next range
My idea is to do it via the index(), but I don't know how....
I am glad about tips and help. I can't get any further on my own.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("td.day").click(function() {
if ($("td.firstClick").length == 0 && $(this).hasClass("reserved") == false) {
$(this).addClass("firstClick");
}
if ($("td.firstClick").length > 0 && $(this).hasClass("firstClick") == false) {
var tds = $("td.day");
var firstClick = $(".firstClick");
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);
tds.filter(function() {
var idx = tds.index(this);
return idx > firstClickIndex && idx < currentIndex;
}).addClass("reserved");
$(".firstClick").addClass("checkin").removeClass("firstClick");
$(this).addClass("checkout");
}
});
<!-- language: lang-css -->
table {
border-collapse: collapse;
}
table tr td {
width: 14%;
}
table tr td:hover {
cursor: pointer;
}
.firstClick {
background: green;
}
.checkin {
background: yellow;
}
.checkout {
background: red;
}
.reserved {
background: blue;
}
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td colspan="7"><b>2016</b>
</td>
</tr>
<tr>
<td colspan="7"><i>November</i>
</td>
</tr>
<tr>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
<th>sun</th>
</tr>
<tr>
<td></td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
</tr>
<tr>
<td class="day">7</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
</tr>
<tr>
<td class="day">14</td>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
</tr>
<tr>
<td class="day">21</td>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
</tr>
<tr>
<td class="day">28</td>
<td class="day">29</td>
<td class="day">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- end snippet -->
答案1
得分: 0
在将reserved类添加到日期范围之前，请检查它们是否已被预订。
$("td.day").click(function() {
if ($("td.firstClick").length == 0 && !$(this).is(".reserved, .checkin, .checkout")) {
$(this).addClass("firstClick");
return;
}
// 再次点击以切换第一个日期
if ($(this).hasClass("firstClick")) {
$(this).removeClass("firstClick");
return;
}
if ($("td.firstClick").length > 0 && !$(this).hasClass("firstClick")) {
var tds = $("td.day");
var firstClick = $(".firstClick");
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);
if (currentIndex < firstClickIndex) {
alert("Checkin必须在Checkout之后");
return;
}
var range = tds.filter(function() {
var idx = tds.index(this);
return idx > firstClickIndex && idx < currentIndex;
});
if (range.filter(".reserved, .checkin, .checkout").length > 0) {
alert("无法选择重叠的范围");
return;
}
range.addClass("reserved");
$(".firstClick").addClass("checkin").removeClass("firstClick");
$(this).addClass("checkout");
}
});
table {
border-collapse: collapse;
}
table tr td {
width: 14%;
}
table tr td:hover {
cursor: pointer;
}
.firstClick {
background: green;
}
.checkin {
background: yellow;
}
.checkout {
background: red;
}
.reserved {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td colspan="7"><b>2016</b></td>
</tr>
<tr>
<td colspan="7"><i>November</i></td>
</tr>
<tr>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
<th>sun</th>
</tr>
<tr>
<td></td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
</tr>
<tr>
<td class="day">7</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
</tr>
<tr>
<td class="day">14</td>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
</tr>
<tr>
<td class="day">21</td>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
</tr>
<tr>
<td class="day">28</td>
<td class="day">29</td>
<td class="day">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
英文:
Before you add the reserved class to the range of days, check if any of them are already reserved.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$("td.day").click(function() {
if ($("td.firstClick").length == 0 && !$(this).is(".reserved, .checkin, .checkout")) {
$(this).addClass("firstClick");
return;
}
// Click again to toggle first date
if ($(this).hasClass("firstClick")) {
$(this).removeClass("firstClick");
return;
}
if ($("td.firstClick").length > 0 && !$(this).hasClass("firstClick")) {
var tds = $("td.day");
var firstClick = $(".firstClick");
var firstClickIndex = tds.index(firstClick);
var currentIndex = tds.index(this);
if (currentIndex < firstClickIndex) {
alert("Checkout has to be after checkin");
return;
}
var range = tds.filter(function() {
var idx = tds.index(this);
return idx > firstClickIndex && idx < currentIndex;
});
if (range.filter(".reserved, .checkin, .checkout").length > 0) {
alert("Can't select overlapping range");
return;
}
range.addClass("reserved");
$(".firstClick").addClass("checkin").removeClass("firstClick");
$(this).addClass("checkout");
}
});
<!-- language: lang-css -->
table {
border-collapse: collapse;
}
table tr td {
width: 14%;
}
table tr td:hover {
cursor: pointer;
}
.firstClick {
background: green;
}
.checkin {
background: yellow;
}
.checkout {
background: red;
}
.reserved {
background: blue;
}
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td colspan="7"><b>2016</b>
</td>
</tr>
<tr>
<td colspan="7"><i>November</i>
</td>
</tr>
<tr>
<th>mon</th>
<th>tue</th>
<th>wed</th>
<th>thu</th>
<th>fri</th>
<th>sat</th>
<th>sun</th>
</tr>
<tr>
<td></td>
<td class="day">1</td>
<td class="day">2</td>
<td class="day">3</td>
<td class="day">4</td>
<td class="day">5</td>
<td class="day">6</td>
</tr>
<tr>
<td class="day">7</td>
<td class="day">8</td>
<td class="day">9</td>
<td class="day">10</td>
<td class="day">11</td>
<td class="day">12</td>
<td class="day">13</td>
</tr>
<tr>
<td class="day">14</td>
<td class="day">15</td>
<td class="day">16</td>
<td class="day">17</td>
<td class="day">18</td>
<td class="day">19</td>
<td class="day">20</td>
</tr>
<tr>
<td class="day">21</td>
<td class="day">22</td>
<td class="day">23</td>
<td class="day">24</td>
<td class="day">25</td>
<td class="day">26</td>
<td class="day">27</td>
</tr>
<tr>
<td class="day">28</td>
<td class="day">29</td>
<td class="day">30</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论