这可能是一个基本问题,但我需要知道如何满足这个要求。
我们每周一都会进行 self 审核,我正在开发一个图表来显示详细信息。用户可以选择不是选择特定日期而是选择一周。
我怎样才能实现这个选项
1)我可以有一个选择选项列表,显示从最近到最旧的星期一(带日期)。
2)我可以有一个只启用星期一的日期选择器吗? - 为此,我可以隐藏日期选择器中的其他日期而不是使其禁用吗?我使用 jquery datepicker 和 timepicker 插件 (http://trentrichardson.com/examples/timepicker/)。
我该如何满足这个要求?
提前致谢
最佳答案
通常处理此问题的方式是允许用户选择任何日期,然后自动选择一周内包含所选日期的所有日期。 http://www.tikalk.com/incubator/week-picker-using-jquery-ui-datepicker 有一个使用默认 JQuery 日期选择器来说明其工作原理的示例。 .
相关脚本是:
$(function() {
var startDate;
var endDate;
var selectCurrentWeek = function() {
window.setTimeout(function () {
$('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active')
}, 1);
}
$('.week-picker').datepicker( {
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate( dateFormat, startDate, inst.settings ));
$('#endDate').text($.datepicker.formatDate( dateFormat, endDate, inst.settings ));
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();
}
});
$('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
});
关于html - 提供选项/日期选择器来选择周,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9960572/