我有这个jsfiddle代码,这是一个星期的选择工作
https://jsfiddle.net/gmo81azy/
我试图选择一个范围的周,就像我应该能够选择一个2周或3周的日期显示,日历确实显示日期,以掩盖周
我怎么能修复它,我尝试了很多,但我错过了一些东西
JS代码
$(function () {
var startDate;
var endDate;
var selectCurrentWeek = function () {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
var $weekPicker = $('.week-picker');
function updateWeekStartEnd() {
var date = $weekPicker.datepicker('getDate') || new Date();
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
}
updateWeekStartEnd();
function updateDateText(inst) {
var dateFormat = inst != 'start' && inst.settings.dateFormat ? inst.settings.dateFormat : $.datepicker._defaults.dateFormat;
console.log( dateFormat)
$('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
$('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
}
//updateDateText('start');
$weekPicker.datepicker({
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function (dateText, inst) {
updateWeekStartEnd();
updateDateText(inst);
selectCurrentWeek();
},
beforeShowDay: function (date) {
var cssClass = '';
if (date >= startDate && date <= endDate) cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function (year, month, inst) {
selectCurrentWeek();
}
});
selectCurrentWeek();
$('.week-picker .ui-datepicker-calendar tr').on('mousemove', function () {
$(this).find('td a').addClass('ui-state-hover');
});
$('.week-picker .ui-datepicker-calendar tr').on('mouseleave', function () {
$(this).find('td a').removeClass('ui-state-hover');
});
});
<div class="week-picker"></div>
<br />
<br />
<label>Week :</label> <span id="startDate"></span> - <span id="endDate"></span>
1条答案
按热度按时间vcirk6k61#
请考虑以下示例:https://jsfiddle.net/Twisty/63mwc2tb/
JavaScript语言
它使用一个数据属性作为一个标志来查看用户第一次和第二次点击的时间。