【发布时间】：2018-01-28 15:27:05
【问题描述】：
我正在构建一个基于 jQuery UI Datepicker 的日历，可以选择一次显示 3 个月的日期范围。现在它看起来像屏幕截图：
所以我需要在这个日历上方添加一个块，从当前月份开始水平放置 12 个月份。我想我需要将默认选择下拉菜单转换为这个水平列表，但由于我对 JavaScript 的经验很少，我什至无法借助互联网上的类似示例将其用于工作。
当您在此块中选择一个月时，它应该将日历切换到 3 个选定的月份。希望你能建议我一个解决方案。
这是我当前的代码：
$("#datepicker").datepicker({
numberOfMonths: 3,
showButtonPanel: false,
dateFormat: 'dd.mm.yy',
minDate: 0,
maxDate: new Date(new Date().getTime() + 365 * 24 * 60 * 60 * 1000),
beforeShowDay: function(date) {
var startDate = $.datepicker.parseDate('dd.mm.yy', $('#start-date').val());
var endDate = $.datepicker.parseDate('dd.mm.yy', $('#end-date').val());
if (startDate && endDate && startDate - endDate) {
if (endDate <= date && date <= startDate) {
if (startDate && date && (startDate.getTime() === date.getTime())) {
console.log('from end to start - backward - red-start ');
return [true, 'ui-red-end', ''];
}
if (endDate && date && (endDate.getTime() === date.getTime())) {
console.log('from end to start - backward - red-end ');
return [true, 'ui-red-start', ''];
}
console.log('from end to start - backward');
return [true, 'ui-state-selected-range', ''];
}
}
if (startDate <= date && date <= endDate) {
console.log('from start to end - forward');
if (startDate && date && (endDate.getTime() === date.getTime())) {
console.log('from start to end - forward - red-end');
return [true, 'ui-red-end', ''];
}
if (endDate && date && (startDate.getTime() === date.getTime())) {
console.log('from start to end - forward - red-start');
return [true, 'ui-red-start', ''];
}
}
if (startDate <= date && date <= endDate) {
console.log('from start to end');
return [true, 'ui-state-selected-range', ''];
}
return [true, '', ''];
},
onSelect: function(dateText, inst) {
var startDate = $.datepicker.parseDate('dd.mm.yy', $('#start-date').val());
var endDate = $.datepicker.parseDate('dd.mm.yy', $('#end-date').val());
if (!startDate || endDate) {
$('#start-date').val(dateText);
$('.start-date-visible').text(dateText);
$('#end-date').val('');
$('.end-date-visible').text('');
$(this).datepicker('option', dateText);
} else {
if (new Date(dateText) < startDate) {
var sDate = $('#start-date').val();
$('.start-date-visible').text(dateText);
$('#start-date').val(dateText);
$(this).datepicker('option', null);
$('.end-date-visible').text(sDate);
$('#end-date').val(sDate);
} else {
$('.end-date-visible').text(dateText);
$('#end-date').val(dateText);
$(this).datepicker('option', null);
}
}
}
});
// start date on default
$('#start-date').val($.datepicker.formatDate('dd.mm.yy', new Date()));
$('.start-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date()));
// end date on default
$('#end-date').val($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() +
6 * 24 * 60 * 60 * 1000)));
$('.end-date-visible').text($.datepicker.formatDate('dd.mm.yy', new Date(new Date().getTime() +
6 * 24 * 60 * 60 * 1000)));td.ui-state-selected-range:first-child a {
border-radius: 20px 0 0 20px;
}
td.ui-state-selected-range:last-child a {
border-radius: 0 20px 20px 0;
}
.ui-red-start a {
position: relative;
background-color: #F29676;
border-radius: 20px;
border: 1px solid #f29676 !important;
}
.ui-red-start a:before {
content: '';
right: -1px;
left: 50%;
top: -1px;
bottom: -1px;
position: absolute;
border: 1px solid #f29676;
border-right: none;
background-color: #f8c3b1;
z-index: -1;
}
.ui-red-end a {
position: relative;
background-color: #F29676;
border-radius: 20px;
border: 1px solid #f29676 !important;
}
.ui-red-end a:before {
content: '';
left: -1px;
right: 50%;
top: -1px;
bottom: -1px;
position: absolute;
border: 1px solid #f29676;
border-left: none;
background-color: #f8c3b1;
z-index: -1;
}
.ui-state-selected-range .ui-state-default {
border: 1px solid #f29676 !important;
border-left: none !important;
border-right: none !important;
background: #f8c3b1 !important;
box-sizing: border-box;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<input type="text" id="start-date" style="visibility: hidden">
<input type="text" id="end-date" style="visibility: hidden">
<span class="start-date-visible"></span>
<span class="end-date-visible"></span>
<div id="datepicker"></div>【问题讨论】：
-
您可以使用您的自定义
span和months名称，如下所示。
标签： javascript jquery datepicker jquery-ui-datepicker uidatepicker