-2
我用php编写了自定义日历,一切都像魅力一样。但是现在我遇到了jquery功能的问题。当用户点击特定日期时,应该选择日期范围内的所有日期(数据属性)。自定义日历,点击标记日期范围
这应该是这样的:
(第16天,直到22被选中。)
到目前为止我的代码:
$(document).ready(function() {
var range = 7; //$('.price-list-calendar').data("package-range");
var range_array = [];
for (var i = 1; i < range; i++) {
range_array.push(i);
}
$(document).on('click', 'td.green', function(e) {
e.preventDefault();
if ($("td.firstClick").length == 0) {
$(this).addClass("firstClick");
$('td.green').filter(function(i) {
return range_array.indexOf(i) > -1
}).addClass("selected");
} else {
$(this).removeClass("firstClick");
$('td.green').removeClass("selected");
}
});
});
.green {
background: #cfe09b;
}
.yellow {
background: #fff59b;
}
.red {
background: #f3997b;
}
h2 {
font-size: 1.625rem;
text-transform: uppercase;
font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
margin-bottom: 10px;
}
table.page-calendar thead,
table.page-calendar thead tr {
border: 0;
background: none;
font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
}
table.page-calendar thead span.month,
table.page-calendar thead tr span.month {
font-size: 1.625rem;
text-transform: upprecase;
}
table.page-calendar thead span.year,
table.page-calendar thead tr span.year {
font-size: 0.875rem;
}
table.page-calendar thead td,
table.page-calendar thead tr td {
padding: 0;
text-align: center;
border: 1px solid #e6e6e6;
color: #dcaa2c;
text-transform: uppercase;
}
table.page-calendar thead td.empty,
table.page-calendar thead tr td.empty {
background: #e6e6e6;
}
table.page-calendar thead td.empty span,
table.page-calendar thead td a,
table.page-calendar thead tr td.empty span,
table.page-calendar thead tr td a {
display: block;
width: 100%;
height: 100%;
padding: 20px 0;
font-size: 2.875rem;
min-height: 88px;
}
table.page-calendar thead td a,
table.page-calendar thead tr td a {
background: #dcaa2c;
border: 1px solid #dcaa2c;
-webkit-transition: 0.5s ease;
-moz-transition: 0.5s ease;
-ms-transition: 0.5s ease;
-o-transition: 0.5s ease;
}
table.page-calendar thead td a:hover,
table.page-calendar thead tr td a:hover {
background: rgba(220, 170, 44, 0.7);
}
table.page-calendar thead td i,
table.page-calendar thead tr td i {
color: #ffffff;
}
tbody {
background: rgba(230, 230, 230, 0.5);
}
.calendar-row td {
border: 1px solid #ffffff;
background: none;
text-align: center;
}
.calendar-row td.calendar-day {
background: rgba(204, 204, 204, 0.5);
}
.calendar-row td.calendar-day.green {
background: #cfe09b;
cursor: pointer;
}
.calendar-row td.calendar-day.yellow {
background: #fff59b;
}
.calendar-row td.calendar-day.red {
background: #f3997b;
}
.calendar-row td.calendar-day.firstClick {
background: #dcaa2c;
color: #ffffff;
}
.calendar-row td.calendar-day.selected {
background: rgba(220, 170, 44, 0.5);
color: #ffffff;
}
.calendar-row td.calendar-day.reserved {
background: #dcaa2c;
color: #ffffff !important;
}
.calendar-row td.calendar-day.secondClick {
background: #dcaa2c;
color: #ffffff;
}
.calendar-row td.calendar-day-np {
background: rgba(230, 230, 230, 0.1);
}
.calendar-row td.today {
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px;
position: relative;
z-index: 12;
}
.calendar-row.heading td {
border: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
font-family: "Droid Serif", Georgia, "Times New Roman", Times, serif;
font-size: 1rem;
padding: 15px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="page-calendar" cellspacing="0" cellpadding="0">
<thead>
<tr>
<td colspan="1" class="empty" valign="middle"><span> </span></td>
<td colspan="6" valign="middle"><span class="month">Februar</span> <span class="year">2017</span></td>
</tr>
<tr>
<td class="calendar-day-head"> So</td>
<td class="calendar-day-head">Mo</td>
<td class="calendar-day-head">Di</td>
<td class="calendar-day-head">Mi</td>
<td class="calendar-day-head">Do</td>
<td class="calendar-day-head">Fr</td>
<td class="calendar-day-head">Sa</td>
</tr>
</thead>
<tbody>
<tr class="calendar-row">
<td class="calendar-day-np"></td>
<td class="calendar-day-np"></td>
<td class="calendar-day-np"></td>
<td class="calendar-day " data-date="01.02.2017" data-amount="">
<div class="day-number">1</div>
</td>
<td class="calendar-day " data-date="02.02.2017" data-amount="">
<div class="day-number">2</div>
</td>
<td class="calendar-day " data-date="03.02.2017" data-amount="">
<div class="day-number">3</div>
</td>
<td class="calendar-day " data-date="04.02.2017" data-amount="">
<div class="day-number">4</div>
</td>
</tr>
<tr class="calendar-row">
<td class="calendar-day " data-date="05.02.2017" data-amount="">
<div class="day-number">5</div>
</td>
<td class="calendar-day " data-date="06.02.2017" data-amount="">
<div class="day-number">6</div>
</td>
<td class="calendar-day " data-date="07.02.2017" data-amount="">
<div class="day-number">7</div>
</td>
<td class="calendar-day " data-date="08.02.2017" data-amount="">
<div class="day-number">8</div>
</td>
<td class="calendar-day " data-date="09.02.2017" data-amount="">
<div class="day-number">9</div>
</td>
<td class="calendar-day " data-date="10.02.2017" data-amount="">
<div class="day-number">10</div>
</td>
<td class="calendar-day " data-date="11.02.2017" data-amount="">
<div class="day-number">11</div>
</td>
</tr>
<tr class="calendar-row">
<td class="calendar-day " data-date="12.02.2017" data-amount="">
<div class="day-number">12</div>
</td>
<td class="calendar-day " data-date="13.02.2017" data-amount="">
<div class="day-number">13</div>
</td>
<td class="calendar-day " data-date="14.02.2017" data-amount="">
<div class="day-number">14</div>
</td>
<td class="calendar-day " data-date="15.02.2017" data-amount="">
<div class="day-number">15</div>
</td>
<td class="calendar-day today green firstClick" data-date="16.02.2017" data-amount="1044.000">
<div class="day-number">16</div>
</td>
<td class="calendar-day green selected" data-date="17.02.2017" data-amount="1044.000">
<div class="day-number">17</div>
</td>
<td class="calendar-day green selected" data-date="18.02.2017" data-amount="1044.000">
<div class="day-number">18</div>
</td>
</tr>
<tr class="calendar-row">
<td class="calendar-day green selected" data-date="19.02.2017" data-amount="1044.000">
<div class="day-number">19</div>
</td>
<td class="calendar-day green selected" data-date="20.02.2017" data-amount="1044.000">
<div class="day-number">20</div>
</td>
<td class="calendar-day green selected" data-date="21.02.2017" data-amount="1044.000">
<div class="day-number">21</div>
</td>
<td class="calendar-day green selected" data-date="22.02.2017" data-amount="1044.000">
<div class="day-number">22</div>
</td>
<td class="calendar-day green" data-date="23.02.2017" data-amount="1044.000">
<div class="day-number">23</div>
</td>
<td class="calendar-day red" data-date="24.02.2017" data-amount="955.000">
<div class="day-number">24</div>
</td>
<td class="calendar-day red" data-date="25.02.2017" data-amount="955.000">
<div class="day-number">25</div>
</td>
</tr>
<tr class="calendar-row">
<td class="calendar-day red" data-date="26.02.2017" data-amount="955.000">
<div class="day-number">26</div>
</td>
<td class="calendar-day red" data-date="27.02.2017" data-amount="955.000">
<div class="day-number">27</div>
</td>
<td class="calendar-day red" data-date="28.02.2017" data-amount="955.000">
<div class="day-number">28</div>
</td>
</tr>
</tbody>
</table>
厚福任何人都可以帮助我!
关于
m。
UPDATE
使用日期解决它:d
var range = calendar_wrapper.data("package-range") - 1;
//Add Days
function addDays(date, days) {
var result = new Date(date);
result.setDate(result.getDate() + days);
return result;
}
//Dates between
function getDates(startDate, stopDate) {
var dateArray = new Array();
var currentDate = startDate;
while (currentDate <= stopDate) {
dateArray.push(currentDate)
currentDate = addDays(currentDate,1);
}
return dateArray;
}
$(document).on('click', calendar_wrapper_class + ' td.green', function(e) {
e.preventDefault();
if($("td.firstClick").length == 0) {
$(this).addClass("firstClick");
var date_var = $(this).data("date-js");
var start_date = new Date(date_var);
var end_date = addDays(start_date, range);
var date_array = getDates(start_date, end_date);
$.each(date_array,function(k,v) {
var datestring = ("0" + v.getDate()).slice(-2) + "." + ("0"+(v.getMonth()+1)).slice(-2) + "." + v.getFullYear();
$('td.green[data-date="' + datestring + '"]').addClass("selected");
});
} else {
$(this).removeClass("firstClick");
$('td.green').removeClass("selected");
}
});
莫非你添加你的解决方案作为你自己问题的答案? –